How to process those data like this form by jquery "Traversal?

Process form data using jQuery

  • 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">&lt/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.

  • Answer:

    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 http://docs.jquery.com/Plugins/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.

Alec at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

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 }); }); http://docs.jquery.com/Ajax/serialize

John Sheehan

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">

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

Caner

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.