CODEWITHSUNDEEP
javascriptjquery
Zeusox
Zeusox

Reputation: 8448

Submit Button Not working After an Ajax Call

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

Upvotes: 0

Views: 891

Answers (2)

Zeusox
Zeusox

Reputation: 8448

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

               }
                }
          });

        } 
  });

});

Upvotes: 0

Chen
Chen

Reputation: 1586

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.

Upvotes: 1

Related Questions