Jquery Ajax form using .on("submit",

Question

I have a page with several html forms on it. Below is the jquery code to submit the forms via an ajax call. It does make the ajax call when any form in the content div is submitted. It does fire even after the form is reloaded via ajax. I cannot figure out how to pass the form data to the handler function. Any help would be greatly appreciated.

To Clarify: var formData = $(this).serializeArray(); is not working. formData is not getting values from the form fileds.

$.ajaxSetup({
  url: "ajax.php",
  type: 'POST',
  contentType: "application/json; charset=utf-8",
  datatype: 'json',
  cache: false,
  timeout : 5000
});
$("#content").on("submit", function(e) {
  e.preventDefault();
  var formData = $(this).serializeArray();
  $.ajax({
    data: formData,
    success: function(jsonData) {
        htmlData = jQuery.parseJSON(jsonData);
        $.each(htmlData, function(id, data){
            $("#"+id).html(data);
        });
    }
});
};

UPDATE:

If I change

$("#content").on("submit", function(e)

to

$("#content").on("submit", "form", function(e)

the form data is serialized and the ajax function works as intended. The new problem is that if the form is not complete and it is reloaded (via ajax) into the content division, the submit event no longer triggers the function. I was trying to configure .on() to function the way .live() did in earlier versions of jquery. It would rebind the submit event after the ajax reload. In this case, .on() is not rebinding. Hope that makes some sense!

Please explain your problem again, I don't understand what is going wrong from your description. — Derk Arts, Dec 23 '11 at 20:45
Do you mean how to access the data on the server or client (javascript/jquery)? — Chibuzo, Dec 23 '11 at 20:57
$(this).serializeArray(); is not picking up the form data. So formData has nothing in it. — Andy B, Dec 23 '11 at 20:57
Show us the HTML as well, if there is a problem with serialize. — Derk Arts, Dec 23 '11 at 21:34
I too am very curious how to use the .on function for submit events of dynamically loaded forms — jao, Jan 31 '12 at 09:37

score -1 · Answer 1 · answered Dec 23 '11 at 20:44

-1

You'll need to get the passed variables in ajax.php through $_POST globals.

For example:

$myVar = $_POST['field_name'];

answered Dec 23 '11 at 20:44

ArVan

4,225
8
36
58

That's not the problem. The ajax function is not getting the form data to send it to the server. – Andy B Dec 23 '11 at 21:00

Jquery Ajax form using .on("submit",

1 Answers1

Linked