jQuery: effacer les entrées de formulaire

J’ai essayé de différentes manières d’effacer un formulaire:

First Name:
Last Name:
Gender: --Please Select-- Female Male
Finish Time: (Minutes) (Seconds)

jQuery # 1:

 function clearInputs(){ $("#txtFirstName").val(''); $("#txtLastName").val(''); $("#ddlGender").val(''); $("#txtMinutes").val(''); $("#txtSeconds").val(''); } 

Cela fonctionne parfaitement.

jQuery # 2:

 function clearInputs(data){ $("#addRunner :input").each(function(){ $(this).val(''); }); 

Cela efface le formulaire mais ne me laisse plus aucune information. J’essaie de cliquer à nouveau sur le bouton et il ne fait rien.

Voici le gestionnaire de clic sur le bouton:

 $("#btnSave").click(function(){ var data = $("#addRunner :input").serializeArray(); $.post($("#addRunner").attr('action'), data, function(json){ if (json.status == "fail"){ alert(json.message); } if (json.status == "success"){ alert(json.message); clearInputs(); } }, "json"); }); 

Code postal PHP:

 <?php if($_POST){ if ($_POST['action'] == 'addRunner') { $fname = htmlspecialchars($_POST['txtFirstName']); $lname = htmlspecialchars($_POST['txtLastName']); $gender = htmlspecialchars($_POST['ddlGender']); $minutes = htmlspecialchars($_POST['txtMinutes']); $seconds = htmlspecialchars($_POST['txtSeconds']); if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) { fail('Invalid name provided.'); } if( empty($fname) || empty($lname) ) { fail('Please enter a first and last name.'); } if( empty($gender) ) { fail('Please select a gender.'); } if( empty($minutes) || empty($seconds) ) { fail('Please enter minutes and seconds.'); } $time = $minutes.":".$seconds; $query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender', finish_time='$time'"; $result = db_connection($query); if ($result) { $msg = "Runner: ".$fname." ".$lname." added successfully" ; success($msg); } else { fail('Insert failed.'); } exit; } 

}

Si j’utilise la méthode jQuery n ° 2, j’obtiens cette erreur dans la console:

 Uncaught TypeError: Cannot read property 'status' of null 

Pourquoi cela arrive-t-il?

J’ai oublié d’inclure ces informations clés:

 function fail ($message){ die(json_encode(array('status'=>'fail', 'message'=>$message))); } function success ($message){ die(json_encode(array('status'=>'success', 'message'=>$message))); 

Cela renvoie le message à la fonction AJAX dans jQuery. Il semble qu’après avoir envoyé le formulaire une fois en utilisant la méthode n ° 2, les messages de réussite / échec sont masqués.

Démo: http://jsfiddle.net/xavi3r/D3prt/

 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 

Réponse originale: Réinitialisation d’un formulaire à plusieurs étapes avec jQuery


La suggestion de Mike (à partir des commentaires) de garder la case à cocher et sélectionne intact!

Attention: Si vous créez des éléments (donc ils ne sont pas dans le dom), remplacez :hidden par [type=hidden] ou tous les champs seront ignorés!

 $(':input','#myform') .removeAttr('checked') .removeAttr('selected') .not(':button, :submit, :reset, :hidden, :radio, :checkbox') .val(''); 

Je recommande d’utiliser un bon vieux javascript:

 document.getElementById("addRunner").reset(); 

Effectuer des recherches et des lectures pour trouver une méthode adaptée à ma situation, sur la soumission de formulaire, exécutez ajax sur un script php distant, en cas de succès / échec, informez l’utilisateur, effacez complètement le formulaire.

J’avais quelques valeurs par défaut, toutes les autres méthodes impliquées .val (”) ne réinitialisant pas mais effaçant le formulaire.

J’ai aussi eu ça en ajoutant un bouton de réinitialisation au formulaire, qui avait un identifiant de myform :

 $("#myform > input[type=reset]").sortinggger('click'); 

Cela pour moi a eu le bon résultat sur la réinitialisation de la forme, oh et n’oubliez pas le

 event.preventDefault(); 

pour arrêter la soumission du formulaire dans le navigateur, comme je l’ai fait :).

Cordialement

Jacko

Vous pouvez essayer

 $("#addRunner input").each(function(){ ... }); 

Les entrées ne sont pas des sélecteurs, vous n’avez donc pas besoin de : Vous ne l’avez pas testé avec votre code. Juste une devinette rapide!

J’ai compris ce que c’était! Lorsque j’ai effacé les champs en utilisant la méthode each (), cela effaçait également le champ caché que le php devait exécuter:

 if ($_POST['action'] == 'addRunner') 

J’ai utilisé le: not () sur la sélection pour l’empêcher d’effacer le champ masqué.