Submitting form with ajax and jQuery

Question

I have a simple form with one select box and two options in it. Here is the related jQuery code:

 $('.myCssClass').on('change', function() {
       alert("This is executed");
       $(this).parent().submit(function(e) {
       alert("This is NOT executed");
          $.ajax({
                 type: "POST",
                 url: "script.php",
                 data: $(this).parent().serialize(), 
                 success: function(data)
                 {
                     alert(data);
                 }
               });
          e.preventDefault();
      });

Form is a parent of a select box. So the first alert is executed when I change the select box option, but then next one is never reached. Any idea why?

Answer 1

This should do it. Don't bother with the submit event - it will not be triggered by a select box.

 $('.myCssClass').on('change', function() {
      $.ajax({
             type: "POST",
             url: "script.php",
             data: $(this).parent().serialize(), 
             success: function(data)
             {
                 alert(data);
             }
      });
  });

Answer 2

You have to create the submit event listener outide the other event:

$('.myCssClass').parent().submit(function(e) {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).serialize(), 
        success: function(data){
            alert(data);
        }
    });

    e.preventDefault();
});

$('.myCssClass').on('change', function() {
    $(this).parent().submit();
});

Or as chain:

$('.myCssClass').on('change', function() {
    $(this).parent().submit();
})
.parent().submit(function(e) {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).serialize(), 
        success: function(data){
            alert(data);
        }
    });

    e.preventDefault();
});

But why two events? Just send the data on change:

$('.myCssClass').on('change', function() {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: $(this).parent().serialize(), 
        success: function(data){
            alert(data);
        }
    });
});

Answer 3

Try the following:

$('.myCssClass').on('change', function() {
    alert("This is executed");
    $(".form-with-class").submit();
});

$(".form-with-class").on('submit', function(e){
  e.preventDefault();
  $.ajax({
      type: "POST",
      url: "script.php",
      data: $(".form-with-class").serialize(), 
      success: function(data){
        alert(data);
      }
  });
});

Answer 4

$('.myCssClass').on('change', function() {
    alert("This is executed");
    $(this).parent('form#id').submit();  // improve performance by reducing the traversal
});

$("#form-with-id").on('submit', function(e){
  e.preventDefault();
  var data = $(this).serialize();
  $.ajax({
      type: "POST",
      url: "script.php",
      data: data,
      success: function(data){
        alert(data);
      }
  });
});

Hope this works.

Answer 5

when a handler is provided it just registers the handler but it does not perform the actual submit.

You may want to call:

$(this).parent().submit();

after your handler is registered. Furthermore, within your handler, you have to refer to the form just by "$(this)" (not: "$(this).parent()"), since the handler belongs to the form.

But since you'd call the submit explicit, there is no point in registering a handler which you then invoke. You could fire your ajax-request directly:

$('.myCssClass').on('change', function() {
   alert("This is executed");
      $.ajax({
             type: "POST",
             url: "script.php",
             data: $(this).parent().serialize(), 
             success: function(data)
             {
                 alert(data);
             }
           });
  });