- Jquery Form Submit Post Serialize
- Jquery Serialize Add Field
- Jquery Ajax Form Post
- Jquery Ajax Submit Form Post Serialize
Today, in our PHP tutorial, we’ll be shown the implementation process for submitting AJAX forms in PHP with Jquery Ajax Post Example or you can say Jquery submit form Ajax. In this Ajax example demo, we’ll use serialize method for creating URL encoded text string by serializing form values. In this case, jQuery serializes the successful controls within the form. Only form elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the.serialize method. Selecting both the form and its children in a set will cause duplicates in the serialized string. You can create an auxiliar form using jQuery with the content of another form and then add thath form other params so you only have to serialize it in the ajax call. You can create an auxiliar form using jQuery with the content of another form and then add thath form other params so you only have to serialize it in the ajax call.
Active6 months ago
I'm trying to send a form's data using jQuery. However, data does not reach the server. Can you please tell me what I'm doing wrong?
My HTML form:
JavaScript (in the same file as the above form):
Server side PHP (/getcontact.php):
Can you please tell me what I am doing wrong?
UPDATE
Checked
var_dump($_POST)
and it returned an empty array. 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. Any ideas?
Thank you!
informatik0113.6k88 gold badges5858 silver badges9494 bronze badges
Dan DinuDan Dinu16k2020 gold badges5858 silver badges9595 bronze badges
9 Answers
You can use this function
return type is json
EDIT: I use
event.preventDefault
to prevent the browser getting submitted in such scenarios.Adding more data to the answer.
dataType: 'jsonp'
if it is a cross-domain call.beforeSend:
// this is a pre-request call back functioncomplete:
// a function to be called after the request ends.so code that has to be executed regardless of success or error can go hereasync:
// by default, all requests are sent asynchronouslycache:
// by default true. If set to false, it will force requested pages not to be cached by the browser.Find the official page here
Victor Leontyev6,87222 gold badges99 silver badges2828 bronze badges
zamilzamil1,42533 gold badges1515 silver badges2626 bronze badges
You can add extra data with form data
use serializeArray and add the additional data:
Yar3,59444 gold badges3434 silver badges5151 bronze badges
MrBiiMrBii
Have you checked in console if data from form is properly serialized? Is ajax request successful? Also you didn't close placeholder quote in, which can cause some problems:
Jan.JJan.J2,67011 gold badge1818 silver badges2828 bronze badges
Have you looked in firebug if POST or GET?.
check the console display.
Put in the test script:
You can see the response from the server, if it shows something.
A. M. MéridaA. M. Mérida1,06522 gold badges1111 silver badges2222 bronze badges
The problem can be PHP configuration:
Please check the setting max_input_vars in the php.ini file.
Try to increase the value of this setting to 5000 as example.
Then restart your web-server and try.
dxb_devdxb_dev
See the answer from this previous post. Than you can use .post() or .get() to send serialized data to server.
Anyway, it is very confusing your situation caused by this lack of details.
If you're using a web server (non-local) this code can be wrong if you forget to setup the actual jquery link. I don't know even if you refer jquery on absolute path or relative path!?
Community♦
Thor AryliahThor Aryliah
Jquery Form Submit Post Serialize
rahulbhondaverahulbhondave
Two End Registration or Users Automatically Registered to 'Shouttoday' by ajax when they Complete Registration by form submission.
Zigri2612Zigri2612
AniketAniket
Not the answer you're looking for? Browse other questions tagged phpjqueryformsserializationform-submit or ask your own question.
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:
Blazemonger74.5k2020 gold badges121121 silver badges161161 bronze badges
Jquery Serialize Add Field
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. Jquery Ajax Form Post
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 RascoJquery Ajax Submit Form Post Serialize
2,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