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;

}

}

Answer 1

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

Answer 2

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