- Jquery Serialize Form Post Html
- Jquery Form Serialize Post Not Working
- Jquery Serialize Form Post File
- Jquery Serialize Form Post Office
- Jquery Form Submit Post Serialize
Active3 years, 5 months ago
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:
BlazemongerJQuery has a method “serialize” to serialize form data. However, J avaScript serialize form do not support this method directly. To allow form data serialize in JavaScript, we must import a library from google. The weird thing is that the same code tested on my local machine works fine. If I upload the files on my hosting space it stops working. I tried doing an old-fashioned form without using jQuery and all data was correct. I don't see how this would be a server configuration problem.
74.5k2020 gold badges121121 silver badges161161 bronze badges
musoNic80musoNic802,36099 gold badges3434 silver badges4848 bronze badges
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
Jake WilsonJake Wilson<button>
without a type specified.43.8k7070 gold badges202202 silver badges314314 bronze badges
try using serializeArray() instead of serialize(). serialize() will produce an url-encoded query string, whereas serializeArray() produces a JSON data structure.
FranzFranz
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 LeybaertPhilippe Leybaert138k2626 gold badges189189 silver badges211211 bronze badges
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.
VassiVassi
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:
markus34.4k2323 gold badges9292 silver badges137137 bronze badges
ZachoZacho
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 Rasco2,44011 gold badge1414 silver badges2121 bronze badges
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 WilsonJake Wilson43.8k7070 gold badges202202 silver badges314314 bronze badges
Not the answer you're looking for? Browse other questions tagged phpjqueryserializationpostget or ask your own question.
Active2 years, 6 months ago
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 is not shown. Below are my codes:html
jQuery
PHP
If I console.log(data), I get:
AmranAmranid_staff=12345&sort=1
30711 gold badge33 silver badges2020 bronze badges
3 Answers
Your server is receiving a string that looks something like this (which it should if you're using jQuery serialize()):
Jquery Serialize Form Post Html
...something like this is probably all you need:
$params
should then be an array that contains all the form element as indexes
19.4k11 gold badge2323 silver badges4545 bronze badges
If you are using
.serialize
, you can get rid of this:You data will be available as follows with
.serialize
:Jquery Form Serialize Post Not Working
It should be:
On PHP side you simple need to access it using the
$_GET['sort']
.Edit:
To view the data, you should define a div with id
result
so that the result returned is displayed within this div.Jquery Serialize Form Post File
Example:
Jquery Serialize Form Post Office
Hyder B.Hyder B.5,57311 gold badge3030 silver badges3636 bronze badges
I am able to do it this way:
jQuery
Jquery Form Submit Post Serialize
PHP
Do give a comment if it need improvement or better solution.
AmranAmran30711 gold badge33 silver badges2020 bronze badges