从按钮窗体指定javascript函数

Question

我正在使用Ajax在我的网站上显示一个注释小部件，并试图从Recaptcha v2升级到Recaptcha v3。到目前为止进展顺利，评论成功发布，但没有显示"；感谢您提交"；它只是重定向到带有成功数据的表单提交URL。这并不理想。

我所做的主要更改是将comment_form.html中的按钮代码更改为：

<button class="button g-recaptcha" id="comment-form-submit"
data-sitekey="{{ site.reCaptcha.siteKey }}"
data-callback='onSubmit'
data-action='submit'>
Submit
</button>
</form>
<script>
function onSubmit(token) {
document.getElementById("new-comment").submit();
}
</script>

(并在表单顶部添加id＝"新评论"(

以前我有

<button class="button" id="comment-form-submit">Submit</button>

相关的javascript代码是：

(function ($) {
var $comments = $('.js-comments');
$('.js-form').submit(function () {
var form = this;

$("#comment-form-submit").html(
'<svg class="icon spin"><use xlink:href="#icon-loading"></use></svg> Sending...'
);
$(form).addClass('disabled');
$.ajax({
type: $(this).attr('method'),
url:  $(this).attr('action'),
data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded',
success: function (data) {
showModal('Comment submitted', 'Thanks! Your comment is <a href="https://github.com/datapolitical/chrisfnicholson.github.io/pulls">pending</a>. It will appear when approved.');
$("#comment-form-submit")
.html("Submit");
$(form)[0].reset();
$(form).removeClass('disabled');
grecaptcha.reset();
},
error: function (err) {
console.log(err);
var ecode = (err.responseJSON || {}).errorCode || "unknown";
showModal('Error', 'An error occured.<br>[' + ecode + ']');
$("#comment-form-submit").html("Submit")
$(form).removeClass('disabled');
grecaptcha.reset();
}
});
return false;
});

我敢肯定，让Ajax进程成为回复就像是一行代码的更改，但我对javascript完全不了解，所以我们非常感谢您的任何想法。

--

编辑：我看到的另一个例子从回调中调用onSubmit函数，但由于我使用这个奇怪的main.js，我不知道如何引用$('.js-form'(.submit(function(event(｛from onSubmit

Answer 1

提交表单后的默认浏览器行为是在成功时重定向，尝试通过在事件上调用preventDefault来防止这种情况，例如：

$('.js-form').submit(function (event) {
event.preventDefault();
// the rest of your code
});