JS 問題求助

qcfgpp2022-03-18  561

要在 read 頁面中加入一個功能

就提提交查詢時

使用 ajax 不刷新頁面提取内容

而為了避免采集

需要用到 GOOGLE 的 reCAPTCHA

這是 HTML 部分的代碼

    <form action="" method="post">
        <div id="alert_message"></div>
            <div class="form-group">
                <label for="pwd">Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Enter your name" name="name" required>
            </div>
            <input type="hidden" name="recaptcha_response" value="" id="recaptchaResponse">
            <input type="submit" name="submit" value="Submit" class="btn btn-success btn-lg" style="padding: 6px 46px; margin: 16px 0 0 0;">
        <div style="font-size: 12px; padding-top: 12px; color: #808080;">Note: This form is protected by Google reCAPTCHA.</div>
    </form>

這是 JS 部分代碼

 $('form').submit(function(event) {
            event.preventDefault(); 
            grecaptcha.ready(function () {
                grecaptcha.execute('<-google recaptcha key->', { action: 'submit' }).then(function (token) {
                    var recaptchaResponse = document.getElementById('recaptchaResponse');
                    recaptchaResponse.value = token;
 
            $.ajax({
                        url: 'submit_enquiry.php',
                        type: 'post',
                        data: $('form').serialize(),
                        dataType: 'json',
                        success: function(response){
                            var error = response.error;
                            var success = response.success;
                            if(error != "") {
                                $('#alert_message').html(error);
                            }
                            else {
                                $('#alert_message').html(success);
                            }
                        },
                        error: function(jqXhr, json, errorThrown){
                            var error = jqXhr.responseText;
                            $('#alert_message').html(error);
                        }
                    });

        });
      });
   });

 

現在遇到問題是:

當點擊 submit 時, 網頁重新載入

我認爲問題出在 JS 代碼部分

因爲自己完全就是個 JS 小白

無法把上面 JS 代碼, 更改為適配 WellCMS 的

請各位大神看看幫忙修改一下

 

 

 

转载请注明原文地址:https://www.wellcms.net/read-212.html
00
最新回复(1)
  • wellcms 使用的代码,建议给 form 创建一个 ID 绑定ID要好些。

    <script>
        $('body').on('submit', 'form', function() {
            let jthis = $(this);
            let jsubmit = jthis.find('#submit');
            jsubmit.button('loading');
            let postdata = jthis.serializeObject();
            $.xpost('submit_enquiry.php', postdata, function(response) {
                let error = response.error;
                let success = response.success;
                if(error) {
                    $('#alert_message').html(error);
                }
    
                if(success) {
                    $('#alert_message').html(success);
                }
            });
            return false;
        });
    </script>
    回复11