Sérialiser et soumettre un formulaire avec jQuery et PHP
J'essaie d'envoyer les données d'un formulaire à l'aide de jQuery. Cependant, les données ne parviennent pas au serveur. Pouvez-vous s'il vous plaît me dire ce que je fais mal?
Mon formulaire HTML:
<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 (dans le même fichier que le formulaire ci-dessus):
<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>
Côté serveur PHP (/ getcontact.php):
$nume = $_REQUEST["nume"]; // $nume contains no data. Also tried $_POST
$email = $_REQUEST["email"];
$telefon = $_REQUEST["telefon"];
$comentarii = $_REQUEST["comentarii"];
Pouvez-vous me dire ce que je fais mal?
MISE À JOUR
Coché var_dump($_POST) et il a renvoyé un tableau vide.
Ce qui est étrange, c'est que le même code testé sur ma machine locale fonctionne correctement. Si je télécharge les fichiers sur mon espace d'hébergement, il ne fonctionne plus. J'ai essayé de faire un formulaire à l'ancienne sans utiliser jQuery et toutes les données étaient correctes.
Je ne vois pas en quoi cela poserait un problème de configuration du serveur. Des idées?
Je vous remercie!
Vous pouvez utiliser cette fonction
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');
}
});
le type de retour est json
EDIT: j'utilise event.preventDefault pour empêcher le navigateur d’être soumis dans de tels scénarios.
Ajouter plus de données à la réponse.
dataType: "jsonp" s'il s'agit d'un appel interdomaine.
beforeSend: // il s'agit d'une fonction de rappel de pré-demande
complete: // une fonction à appeler après la requête se termine. Le code à exécuter indépendamment du succès ou de l'erreur peut se trouver ici
async: // par défaut, toutes les demandes sont envoyées de manière asynchrone
cache: // par défaut, true. Si la valeur est false, les pages demandées ne seront pas mises en cache par le navigateur.
Trouver la page officielle ici
Vous pouvez ajouter des données supplémentaires avec les données de formulaire
utilisez serializeArray et ajoutez les données supplémentaires:
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');
}
});
Enregistrement à deux extrémités ou utilisateurs automatiquement inscrits à "Shouttoday" par ajax lorsqu’ils ont terminé l’enregistrement en soumettant leur formulaire.
var deffered = $.ajax({
url:"code.shouttoday.com/ajax_registration",
type:"POST",
data: $('form').serialize()
});
$(function(){
var form;
$('form').submit( function(event) {
var formId = $(this).attr("id");
form = this;
event.preventDefault();
deffered.done(function(response){
alert($('form').serializeArray());alert(response);
alert("success");
alert('Submitting');
form.submit();
})
.error(function(){
alert(JSON.stringify($('form').serializeArray()).toString());
alert("error");
form.submit();
});
});
});
Voir la réponse de ce post précédent. Ensuite, vous pouvez utiliser .post () ou .get () pour envoyer des données sérialisées au serveur.
Convertir les données de formulaire en objet JavaScript avec jQuery
En tout cas, votre situation est très déroutante à cause de ce manque de détails.
Si vous utilisez un serveur Web (non local), ce code peut être erroné si vous oubliez de configurer le lien JQuery. Je ne sais pas même si vous référez jquery sur un chemin absolu ou relatif!?
<script type="text/javascript">
$(document).ready(
function() {
populateUser();
$("#user").submit(
function(e) {
e.preventDefault();
jQuery.ajaxSetup({
async : false
});
if ($("#roleId").val() != 'Select role') {
$.post($(this).attr("action"), $(this)
.serialize(), function(response) {
alert(response.message);
$("#user")[0].reset();
populateUser();
jQuery.ajaxSetup({
async : true
});
});
} else {
alert("Please Select the role of user");
}
})
});
$("#contactForm").submit(function() {
$.post(url, $.param($(this).serializeArray()), function(data) {
});
});
Le problème peut être PHP configuration:
Veuillez vérifier le réglage max_input_vars dans le fichier php.ini.
Essayez d'augmenter la valeur de ce paramètre à 5000 à titre d'exemple.
max_input_vars = 5000
Puis redémarrez votre serveur Web et essayez.
Avez-vous vérifié dans la console si les données du formulaire sont correctement sérialisées? La demande ajax est-elle réussie? De plus, vous n’avez pas fermé la citation d’espace réservé, ce qui peut poser certains problèmes:
<textarea name="comentarii" cols="36" rows="5" placeholder="Message>
Avez-vous regardé dans firebug si POST ou GET ?.
vérifiez l'affichage de la console.
Mettez dans le script de test:
console.log(data);
Vous pouvez voir la réponse du serveur, si elle montre quelque chose.