Process form data using jQuery

Question

I'm currently using Prototype, but I'd like to rewrite this function to jQuery:

function post(div,url,formId) {
  new Ajax.Updater(div, url, {
    asynchronous:true, 
    parameters:Form.serialize(formId)
  });
}

HTML example that goes with it:

<form method="post" action="" id="foo" 
  onsubmit="post('result','getdata.php','foo');return false;">
  <input type="text" name="data" />
</form>
<div id="result"></div>

I've been looking at jQuery.load() and jQuery.post(), but I'm not sure which one to use and how exactly.

Thanks in advance for your help.

Paolo Bergantino · Accepted Answer · 2009-06-02 22:07:48Z

8

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.

edited Jun 2, 2009 at 22:07

answered Jun 2, 2009 at 20:30

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ichiban Over a year ago

Much better answer than mine +1

Paolo Bergantino Over a year ago

Note that you COULD still do this with the higher-level docs.jquery.com/Ajax/load#urldatacallback function, but it isn't as easy to get it to do POST instead of GET in conjunction with the serialize function. For this reason I went with ajax.

Alec Over a year ago

Thank you all for your answers! This works great. For now it's to replace the Prototype function, so I can start using just the jQuery library with my existing scripts. The problem is that I use this function on many pages that are the result of an ajax callback, so binding the scripts won't work within the $(document).ready() function. I use jQuery.live for a few things, but according to docs.jquery.com/Events/live it doesn't support the submit event yet.

John Sheehan · Accepted Answer · 2009-06-02 20:28:56Z

0

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

answered Jun 2, 2009 at 20:28

John Sheehan

78.3k30 gold badges162 silver badges194 bronze badges

1 Comment

John Sheehan Over a year ago

use $.ajax if you need more options for handling errors and other callbacks

Caner · Accepted Answer · 2010-07-18 15:07:43Z

-3

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

answered Jul 18, 2010 at 15:07

Caner

1

Collectives™ on Stack Overflow

Process form data using jQuery

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related