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

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

Answer 2

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

               }
                }
          });

        } 
  });

});