Load jQuery/ajax in javascript

Question

I'm using ajax for my form because I don't want the page to reload after submit. Now is everything working but the only problem is that the ajax script runs everytime I click the submit button.

I thought I could just paste the ajax in my if statement that tells when to run and when not, but it doesn't work.. anyone have any idea why?

theForm.onsubmit = function() {
if (pion == 1 || myName.value.length == 0 || myMessage.value.length == 0) {
    if (pion == 1 || emailValid.value.length == 0) {
        emailValid.style.border = "1px solid red";
        myError.innerHTML = "U heeft geen geldig e-mail adres ingevoerd.";
    }       
    if (myName.value.length == 0) {
        myName.style.border = "1px solid red";
        myError.innerHTML = "U heeft geen naam ingevuld.";
    }
    if (myMessage.value.length == 0) {
    myMessage.style.border = "1px solid red";
    myError.innerHTML = "U heeft geen bericht ingevuld.";
    }
    return false;
}

else {
    // the ajax I found somewhere, that works but not in this if/else statement
    $(function () {
        $('form').bind('submit', function () {
          $.ajax({
            type: 'post',
            url: 'mail.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
    });



    return true;

}

}

lucasnadalutti · Accepted Answer · 2015-11-09 20:44:23Z

This code block:

$('form').bind('submit', function () {
      $.ajax({
        type: 'post',
        url: 'mail.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });
      return false;
    });

bound the function that sends the AJAX request to your form element's submit event. Once it did, the function remains bound forever (or at least until you explicitly unbind it). That's why once your code falls in the else statement for the first time, the AJAX request will be sent every time the form is submit.

That said, your if/else logic should be inside the function that is bound to your form's submit event in order to send the AJAX request conditionally. Something like:

$('form').bind('submit', function () {
      if (etc etc etc) {
        // do other things
      }
      else {
        // send AJAX
        $.ajax({
          type: 'post',
          url: 'mail.php',
          data: $('form').serialize(),
          success: function () {
            alert('form was submitted');
          }
        }
      });
      return false;
    });

David · Accepted Answer · 2015-11-09 20:46:21Z

1

// the ajax I found somewhere

Copying/pasting code into your project without any knowledge of what that code does is a famously bad idea.

This code doesn't make an AJAX call:

$(function () {
    // anything in here
});

What this code does is tell jQuery to execute that function when the document is ready. But presumably the document is already ready when you invoke this, since it's happening on a form submit event.

At best, depending on how the internals of jQuery works, it might be executing that inner function immediately. But still, you don't need that wrapping call to jQuery.

But then, what is that function doing?:

$('form').bind('submit', function () {
  // anything in here
});

Again, it's not actually executing any AJAX code. All this is doing is binding a function to the form's submit event. That function may contain AJAX code (and in this case it does), but that's not being executed here. It will be executed when the form is next submitted.

But, you're doing this every time you submit the form. So what's happening is:

User presses submit, nothing visibly happens. 1 event handler is bound to the next submit event.
User presses submit, 1 event handler (AJAX) is executed, 2 event handlers are now bound to the next submit event.
User presses submit, 2 event handlers (AJAX) are executed, 4 event handlers are now bound to the next submit event.
and so on...

If you want to call the AJAX code in the else block, then just call it in the else block:

if (/* ... */) {
  // ...
} else {
  $.ajax({
    type: 'post',
    url: 'mail.php',
    data: $('form').serialize(),
    success: function () {
      alert('form was submitted');
    }
  });
}

answered Nov 9, 2015 at 20:46

David

221k42 gold badges245 silver badges337 bronze badges

8 Comments

user3124133 Over a year ago

One more question.. If I put other lines of code in the else statement it doesn't work anymore.. any idea why? So i want to also add this line of code in 'else': myMessage.value = "";

David Over a year ago

@user3124133: Define "it doesn't work". Show the actual code you're using and describe the error.

user3124133 Over a year ago

else { 		myMessage.value = ""; 	 	  $.ajax({ 	    type: 'post', 	    url: 'mail.php', 	    data: $('form').serialize(), 	    success: function () { 	    } 	  }); 	   return false; 	    }

That is the entire code in else

user3124133 Over a year ago

The ajax part is not working anymore because i don't get a mail after submit if I add the myMessage part.

David Over a year ago

@user3124133: "because i don't get a mail" isn't really a meaningful debugging process. Use your browser's debugging tools. Are there any errors in the JavaScript console? When you step through the code in the debugger, does it execute at all? Is an AJAX request made to the server? What is the server's response? You need to debug your code, don't treat it as a black box.

|

Collectives™ on Stack Overflow

Load jQuery/ajax in javascript

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related