从按钮表单指定 javascript 函数

Question

我正在使用 Ajax 在我的网站上显示一个 cmets 小部件，并尝试从 Recaptcha v2 升级到 Recaptcha v3。到目前为止一切顺利，cmets 成功发布，但它没有显示“感谢提交”模式，它只是重定向到带有成功数据的表单提交 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="new-comment" 添加到表单顶部）

以前我有

<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，因此非常感谢任何想法。

--

编辑：我看到的other example 从他们的回调中调用了 onSubmit 函数，但由于我使用的是这个奇怪的 main.js，所以我不知道如何引用 $('.js-form').submit(function （事件）{ 来自 onSubmit

Answer 1

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

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