Process form data using jQuery

Answer 1

Use this and get rid of the onsubmit attribute in your HTML:

$(document).ready(function() {
    $("#foo").submit(function() {
        $.post($(this).attr("action"), $(this).serialize());
        return false; // prevent actual browser submit
    });
});

jQuery serialize method docs

Answer 2

With this HTML:

<form method="post" action="getdata.php" id="foo">
  <input type="text" name="data" />
</form>
<div id="result"></div>

You can do this with jQuery:

$(function() { // wait for the DOM to be ready
    $('#foo').submit(function() { // bind function to submit event of form
        $.ajax({
            type: $(this).attr('method'), // get type of request from 'method'
            url: $(this).attr('action'), // get url of request from 'action'
            data: $(this).serialize(), // serialize the form's data
            success: function(responseText) {
                // if everything goes well, update the div with the response
                $('#result').html(responseText);
            }
        });
        return false; // important: prevent the form from submitting
    });
});

The reason I got rid of the onsubmit code is because it is considered bad practice to have inline JavaScript like that. You should strive to make your forms free of JavaScript and then bind all the JavaScript away from it. This is known as unobtrusive JavaScript and it is a Good Thing.

EDIT:

Since you have that code in many pages, this is a function that will do what you want using the same signature you currently have on the post function. I recommend you take a few hours to update all your forms over keeping this, but here it is anyways:

function post(div,url,formId) {
    $.post(url, $('#' + formId).serialize(), function(d) {
        $('#' + div).html(d);
    });
}

As far as your problem, the livequery plugin could help you there. Alternatively, it is as simple as encapsulating the binding code in a function and calling it whenever a form is added.

Answer 3

Hello,

I am facing a problem right now using this code provided by Paolo Bergantino. I do have my "" and I rename this line: "$('#foo').submit(function()" with the right form name but it does not print anything on the and to see if it was executing with success this line: "success: function(responseText) {" I did an alert("test"); and it did not show the alert. Could it be the enctype?

I do have the reference all good for the jquery library. What do I have wrong?

Here a piece of code:

$(function() { // wait for the DOM to be ready
    $('#frm_addrecord').submit(function() { // bind function to submit event of form
        $.ajax({
            type: $(this).attr('method'), // get type of request from 'method'
            url: $(this).attr('action'), // get url of request from 'action'
            data: $(this).serialize(), // serialize the form's data
            success: function(responseText) {
                // if everything goes well, update the div with the response
                $('#result').html(responseText);
            }
        return false;
        });
        return false; // important: prevent the form from submitting
    });
});


<form id="frm_addrecord" name="frm_addnew" method="post" action="" enctype="multipart/form-data">

Answer 4

You can't send "multipart/form-data" forms with jquery because of security problems. You must do it with flash or iframe...