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

Ntokozo Zwane · Accepted Answer · 2021-03-11 21:55:55Z

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, 2021 at 21:55

Ntokozo Zwane

1,7621 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

icecub Over a year ago

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

cfn Over a year ago

Yea it works fine with recaptcha v2 so I'm assuming it handled that issue, but I'll give it a shot regardless.

cfn Over a year ago

Sadly you're correct @icecub that did not fix the problem.

cfn Over a year ago

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

Ntokozo Zwane Over a year ago

@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

Collectives™ on Stack Overflow

specifying javascript function from button form

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related