jQuery: Automatically submit form only after submit button clicked

Question

I have a regular form, when the submit button is clicked I want to hide the submit button, and if any form values change after submitting it'll auto submit again.

I'm using the following code and it works, but each time I update the form data and the form is automatically submit, in the JS console I can see it's being submit many many times, and the number increases each time it auto submits. e.g. first auto submit posted once, second auto submit posted 4 times, third auto submit posted 8 times and then the form starts getting really slow due to this.

jQuery(function($) {

$(document).on("click",'#bookingbutton', function() {
    $( "#bookingbutton" ).css( "display", "none" );
    $( ".bookroom1" ).addClass( "bookroom1-submit" );

    $(".bookroom1-submit").change(function() {
        $("#bookingbutton").click();
    });

});

});

Insane Skull · Accepted Answer · 2015-10-22 06:01:38Z

2

That is because each time you call $("#bookingbutton").click() you are registering again a change listener in .bookroom1-submit.

Try replacing

$(".bookroom1-submit").change(function() {
    $("#bookingbutton").click();
});

With

$(".bookroom1-submit").off('change').on('change', function() {
    $("#bookingbutton").click();
});

That should do it.

EDIT

Some further explanation on the problem:

Submit button is clicked.
It adds a class to the button and registers a change listener.
Next time, when an input changes, you are triggering a click on the button, which will cause 1. and 2. to happen again. Now you will have 2 listeners for change.
it will continue to grow exponentially.

Another alternative is, instead of $("#bookingbutton").click(); use $("#your-form-id").trigger('submit');

edited Oct 22, 2015 at 6:01

Insane Skull

9,3619 gold badges49 silver badges66 bronze badges

answered Oct 22, 2015 at 4:10

nbermudezs

2,8541 gold badge22 silver badges20 bronze badges

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

1 Comment

The Bobster Over a year ago

Thanks a lot for the great explaination!

Sudipta Kumar Maiti · Accepted Answer · 2015-10-22 04:20:02Z

1

Use jquery off and then one:

jQuery(function ($) {
      $(document).off("click", '#bookingbutton').one
      ("click", '#bookingbutton', function () {
          $("#bookingbutton").css("display", "none");
          $(".bookroom1").addClass("bookroom1-submit");

          $(".bookroom1-submit").change(function () {
              $("#bookingbutton").click();
          });

      });

  });

answered Oct 22, 2015 at 4:20

Sudipta Kumar Maiti

1,7091 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery: Automatically submit form only after submit button clicked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related