JQuery - Serialize Form Post Values. How do I want to post a form using jquery serialize function? I tried to post the form value but on the php part, the value. Solutions - jQuery. To prevent the double-serialization of your form data, acquire it as an array of key/value pairs instead of a serialized string by invoking jQuery's.serializeArray method on the form element instead of.serialize. Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties.

I want to submit a form using jQuery. Can someone provide the code, a demo or an example link?

Dharmanmehulmehul

23 Answers

It depends on whether you are submitting the form normally or via an AJAX call. You can find lots of information at jquery.com, including documentation with examples. For submitting a form normally, check out the submit() method to at that site. For AJAX, there are many different possibilities, though you probably want to use either the ajax() or post() methods. Note that post() is really just a convenient way to call the ajax() method with a simplified, and limited, interface.

A critical resource, one I use every day, that you should bookmark is How jQuery Works. It has tutorials on using jQuery and the left-hand navigation gives access to all of the documentation.

Examples:

Normal

AJAX

Note that the ajax() and post() methods above are equivalent. There are additional parameters you can add to the ajax() request to handle errors, etc.

Dave Powerstvanfossontvanfosson

You will have to use $('#formId').submit().

You would generally call this from within a function.

For example:

You can get more information on this on the Jquery website.

AppulusDracoDraco

In jQuery I would prefer the following:

But then again, you really don't need jQuery to perform that task - just use regular JavaScript:

when you have an existing form, that should now work with jquery - ajax/post now you could:

• hang onto the submit - event of your form
• prevent default functionality of submit

• do your own stuff

Please note that, in order for the serialize() function to work in the example above, all form elements need to have their name attribute defined.

Example of the form:

@PtF - the data is submitted using POST in this sample, so this means you can access your data via

, where dataproperty1 is a 'variable-name' in your json.

here sample syntax if you use CodeIgniter:

Koen HollanderAdamSaneAdamSane

For information
if anyone use

Do not something like this

It took many hours to find me that submit() won't work like this.

this will send a form with preloader :

i'have some trick to make a form data post reformed with random method http://www.jackart4.com/article.html

Use it to submit your form using jquery.Here is the link http://api.jquery.com/submit/

Note that if you already installed a submit event listener for your form, the innner call to submit()

won't work as it tries to install a new event listener for this form's submit event (which fails). So you have to acces the HTML Element itself (unwrap from jQquery) and call submit() on this element directly:

bluishAhmedAhmed

You can also use the jquery form plugin to submit using ajax aswell:

RichardRichardEdwin de Koning

Note that in Internet Explorer there are issues with dynamically created forms. A form created like this will not submit in IE (9):

To get it working in IE create the form element and attach it before submitting like so:

Creating the form like in example 1 and then attaching it will not work - in IE9 it throws a JScript error DOM Exception: HIERARCHY_REQUEST_ERR (3)

Props to Tommy W @ https://stackoverflow.com/a/6694054/694325

NenotlepNenotlep

The solutions so far require you to know the ID of the form.

Use this code to submit the form without needing to know the ID:

For example if you were wanting to handle the click event for a button, you could use

Jessemuzzamomuzzamo

If the button is located between the form tags, I prefer this version:

Tk421Tk421Ram Ch. BachkhetiRam Ch. Bachkhetidaniel__

My approach slightly Different Change the button into submit button and then click

NaveenDANaveenDA

It will post the form data on your given file name via AJAX.

FinalForm

I recommend a generic solution so you don't have to add the code for every form. Use the jquery form plugin (http://jquery.malsup.com/form/) and add this code.

danidacardanidacarvdegennevdegenne

I have also used the following to submit a form (without actually submitting it) via Ajax:

brian newmanbrian newman

protected by NullPoiиteяJun 4 '14 at 12:01

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged jquery or ask your own question.

I'm trying to send a lot of data from a form using the $.post method in jQuery. I've used the serialize() function first to make all the form data into one long string which I will then explode serverside.The weird thing is when I try and send it using $.post it appends the result of the serialize() to the URL as if I was sending it using GET. Anyone have any ideas why this is happening?

Here's the jquery:

here's the php:

BlazemongermusoNic80musoNic80

7 Answers

If you are using a <button> element to activate the serialize and ajax, and if that <button> element is within the form element, the button automatically acts as a form submission, no matter what other .click assignment you give it with jQuery.

type='submit'

<button></button> and <button type='submit'></button> are the same thing. They will submit a form if placed within the <form> element.

type='button'

<button type='button'></button> is different. It is just a normal button and will not submit the form (unless you purposely make it submit the form via JavaScript).

And in the case where a form element has no action attribute specified, this submission simply sends the data back onto the same page. So you will end up seeing a page refresh, along with the serialized data appearing in the URL as if you used GET in your ajax.

Possible solutions

1 - Make the <button> type button. As explained above, this will prevent the button from submitting the form.

Before:

After:

2 - Move the <button> element outside the <form> element. This will prevent the button from submitting the form.

Before:

After:

3 - Add in the preventDefault() into the button click handler to prevent the form from being submitted (it's default action):

Obviously without seeing all your code, I have no idea if this is the case for your issue, but the only reason I have ever seen behavior you are describing is because the submit button was a <button> without a type specified.

Jake WilsonJake Wilson

try using serializeArray() instead of serialize(). serialize() will produce an url-encoded query string, whereas serializeArray() produces a JSON data structure.

What leads you to believe that the data is appended to the URL?

Anyway, wouldn't it make more sense to pass the form values in the form data itself? It will allow you to skip the 'explode' step:

Philippe Leybaert

Jquery Form Serialize Json Post

Philippe Leybaert

So this is probably a bit obtuse, but I made a function to help me do this very thing since I got tired of making a bunch of fixes every time. serializeArray is kind of annoying because it provides a collection of objects, when all I wanted to have PhP reconstruct was an associative array. The function below will go through the serialized array and will build a new object with the appropriate properties only when a value exists.

Firstly, the function (it takes the ID of the form in question):

When constructing my posts I also usually use an object since I usually tag on two or three other values before the form data and I think it looks cleaner than to define it inline, so the final step looks like this:

Server-side all you have to do is $payload = json_decode($_POST['data'], true) and you have yourself an associative array where the keys are the names of your form fields.

Full disclaimer though, multiple-selects probably won't work here, you would probably only get whichever value was last on the list. This is also created very specifically to suit one of my projects, so you may want to tweak it to suit you. For instance, I use json for all of my replies from the server.

Try this syntax. I use this to serialize a form and POST via ajax call to WCF service. Also, you can send this back a single JSON object instead of building the object the way you are. Try this:

markus

On the php side, you may want to look into parse_str. It will parse that url string into variables, or into an array if you utilize the 2nd optional parameter.

Chris RascoChris Rasco

One more possible reason for this issue: If you have a form without any sort of submission action assigned to it, whenever you press the 'ENTER' key while filling out the form, the form will be submitted to the current URL, so you will see the serialized data appear in the URL as if you were using a GET ajax transaction. A simple solution to this problem, just prevent ENTER from submitting the form when its pressed:

Jake Wilson

Jquery Post Form Serialize File Upload

Jake Wilson

Jquery Serialize

Jquery Serialize Form Data

Not the answer you're looking for? Browse other questions tagged phpjqueryserializationpostget or ask your own question.