Submit Button Not working After an Ajax Call

Question

Submit button does not work after an ajax call; however, if I load the page it works fine. This is what is going on: I do have a modal that shows a dialog concerning email change confirmation. If the user clicks confirm, then the form submits fine; however, if the user clicks no and go ahead and submits the form with the originally saved email address, but updates different forms, the button does not submits anything. I would have to reload the page again to make it work. Here is the JS code for the above behavior.

==> In a nutshell, what I am trying to do is as follows: If the customer comes and tries to change their email address, the modal pops up with a confirmation message (Yes or no). If they click yes then the form submits fine; however, if they click no and reenter their original email, the submit button does not submit the form.

$(document).ready(function() {

  window.onload = function() {

    document.getElementById('confirmEmailChange').onclick = function() {
      document.getElementById('updateCustomerInfoFormId').submit();
      return false;
    };
    $('#updateInfoBut').click(function() {

      let currentCustomerEmail = $('#currentCustomerEmail').val();
      let customerEmail = $('#customerEmail').val();

      if (currentCustomerEmail !== customerEmail) {

        $('form[name=update_customer]').submit(function(e) {
          e.preventDefault();
        });

        $.ajax({
          url: "This is our API URL" + customerEmail,
          dataType: 'text',
          success: function(json) {

          },
          statusCode: {
            404: function() {
              $('#customerInfoModal').modal({
                show: true
              });

            },
            200: function() {
              $('#emailAlreadyUsedModal').modal({
                show: true
              });
            }
          }
        });
      }
    });
  }
});

Have you checked the console log for errors ? It's possible an error has been encountered, which is preventing the button from working. — devlin carnate
– devlin carnate, Commented Sep 19, 2019 at 17:14

Chen · Accepted Answer · 2019-09-19 18:06:52Z

1

It looks like

$('form[name=update_customer]').submit(function(e) {
    e.preventDefault();
});

is preventing the form from submit itself via preventDefault() call.

The default action of a form submit is to submit the form itself, by prevent the default action you basically tells the form to submit then stop it from submitting.

If you look at here, you will find that passing a callback to submit() essentially gives it a handler rather than submit the form. And the handler will be called every time when you try to submit the form in other ways.

edited Sep 19, 2019 at 18:06

answered Sep 19, 2019 at 17:19

Chen

1,5861 gold badge12 silver badges16 bronze badges

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

8 Comments

Zeusox Over a year ago

Yes, I need that behavior to check for other validations. I later on submit the form through other button clicks...

Chen Over a year ago

@Zeusox Because when you intercept the submit function, you are not only trigger this one but also adding the callback to the form submit. If you add a line of log before the preventDefault() call, you should see it get triggered everytime you are trying to submit the form, either via button click or other methods.

EternalHour Over a year ago

@Zeusox - Putting e.preventDefault() there makes that part of the code pointless. As @Chen says your form is never sent.

EternalHour Over a year ago

It depends on what you are trying to do. If you are trying to send the form via ajax, leave the preventDefault and move your ajax call inside the submit event.

Chen Over a year ago

@Zeusox May be you can validate the form manually instead of calling the submit?

|

Zeusox · Accepted Answer · 2019-09-19 19:51:11Z

I have figured this out by moving the e.preventDefault(); inside the if statement function, and manually submitting the button outside the ajax call when the modal is confirmed. The following works great:

   $(document).ready(function(){

  document.getElementById('confirmEmailChange').onclick = function() {
      document.getElementById('updateCustomerInfoFormId').submit();
      return false;
  };

  $('#updateInfoBut').on('click', function(e) {
    let currentCustomerEmail = $('#currentCustomerEmail').val();
    let customerEmail = $('#customerEmail').val();
        if(currentCustomerEmail !== customerEmail){
          e.preventDefault();
          $.ajax({
               url:"API LINK GOES HERE" + customerEmail,
               dataType: 'text',
               success:function(json){
               },
               statusCode: {
               404: function() {
                 $('#customerInfoModal').modal({show: true});

               },
               200: function() {
                 $('#emailAlreadyUsedModal').modal({show: true});

               }
                }
          });

        } 
  });

});

Collectives™ on Stack Overflow

Submit Button Not working After an Ajax Call

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related