Serializing and submitting a form with jQuery and PHP
Solution 1
You can use this function
var datastring = $("#contactForm").serialize();
$.ajax({
type: "POST",
url: "your url.php",
data: datastring,
dataType: "json",
success: function(data) {
//var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
// do what ever you want with the server response
},
error: function() {
alert('error handling here');
}
});
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 function
complete:
// a function to be called after the request ends.so code that has to be executed regardless of success or error can go here
async:
// by default, all requests are sent asynchronously
cache:
// by default true. If set to false, it will force requested pages not to be cached by the browser.
Find the official page here
Solution 2
You can add extra data with form data
use serializeArray and add the additional data:
var data = $('#myForm').serializeArray();
data.push({name: 'tienn2t', value: 'love'});
$.ajax({
type: "POST",
url: "your url.php",
data: data,
dataType: "json",
success: function(data) {
//var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
// do what ever you want with the server response
},
error: function() {
alert('error handing here');
}
});
Solution 3
$("#contactForm").submit(function() {
$.post(url, $.param($(this).serializeArray()), function(data) {
});
});
Comments
-
Dan Dinu about 3 years
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:
<form id="contactForm" name="contactForm" method="post"> <input type="text" name="nume" size="40" placeholder="Nume"> <input type="text" name="telefon" size="40" placeholder="Telefon"> <input type="text" name="email" size="40" placeholder="Email"> <textarea name="comentarii" cols="36" rows="5" placeholder="Message"></textarea> <input id="submitBtn" type="submit" name="submit" value="Trimite"> </form>
JavaScript (in the same file as the above form):<script type="text/javascript"> $(document).ready(function(e) { $("#contactForm").submit(function() { $.post("getcontact.php", $("#contactForm").serialize()) // Serialization looks good: name=textInNameInput&&telefon=textInPhoneInput etc .done(function(data) { if (data.trim().length > 0) { $("#sent").text("Error"); } else { $("#sent").text("Success"); } }); return false; }) }); </script>
Server side PHP (/getcontact.php):$nume = $_REQUEST["nume"]; // $nume contains no data. Also tried $_POST $email = $_REQUEST["email"]; $telefon = $_REQUEST["telefon"]; $comentarii = $_REQUEST["comentarii"];
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!