specifying javascript function from button form

Question

I'm using Ajax to display a comments widget on my site and am trying to upgrade from Recaptcha v2 to Recaptcha v3. So far it's gone well, comments successfully post, but instead of displaying the "thanks for submitting" modal, it just redirects to the form submission URL with the success data. This is not ideal.

The main change I made was to change the button code in my comment_form.html to this:

<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>

(and added the id="new-comment" to the top of the form)

previously i had

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

the relevant javascript code is:

(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;
  });

I'm pretty sure it's like a one line change to make the Ajax process the reply, but I'm totally out of my depth with javascript, so any thoughts are greatly appreciated.

--

Edit: The other example I saw calls the onSubmit function from their callback but since I'm using this weird main.js I don't know how to reference $('.js-form').submit(function (event) { from onSubmit

score 0 · Answer 1 · answered Mar 11 '21 at 21:55

0

The default browser behaviour after submitting a form is to redirect on success, try preventing this by calling preventDefault on the event, eg:

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

answered Mar 11 '21 at 21:55

Ntokozo Zwane

1,572
14
20

2

The submit event handler in OP's code returns false at the end. You're correct, but it's essentially doing the same (or at least supposed to). – icecub Mar 11 '21 at 21:58
Yea it works fine with recaptcha v2 so I'm assuming it handled that issue, but I'll give it a shot regardless. – cfn Mar 11 '21 at 22:21
Sadly you're correct @icecub that did not fix the problem. – cfn Mar 11 '21 at 22:27
The other examples I've seen call the onSubmit function from their callback but since I'm using this weird main.js I don't know how to reference $('.js-form').submit(function (event) { from onSubmit – cfn Mar 11 '21 at 22:36
@cfn Had a deeper look, and I noticed this `$("#comment-form-submit").html("Submit");`, I suspect this might be triggering the form submitsion, and thus the subsequent redirect – Ntokozo Zwane Mar 12 '21 at 23:15

specifying javascript function from button form

1 Answers1