web-dev-qa-db-fra.com

jQuery: Effacement des entrées de formulaire

J'ai essayé différentes façons d'effacer un formulaire:

<form action="service.php" id="addRunner" name="addRunner" method="post">
First Name: <input type="text" name="txtFirstName" id="txtFirstName" /><br />
Last Name:  <input type="text" name="txtLastName" id="txtLastName" /><br />
Gender: <select id="ddlGender" name="ddlGender"><option value="">--Please Select--</option>
<option value="f">Female</option>
<option value="m">Male</option>
</select><br />
Finish Time:
<input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2">(Minutes)
<input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2">(Seconds)
<br />
<button type="submit" name="btnSave" id="btnSave">Add Runner</button>
<input type="hidden" name="action" value="addRunner" id="action">
</form>

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('');
});

Ceci efface le formulaire mais ne me permet plus de lui soumettre aucune information. J'essaie de cliquer à nouveau sur le bouton et cela 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 # 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 cette information clé:

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 soumis le formulaire une fois à l'aide de la méthode n ° 2, les messages de réussite/d'échec sont supprimés.

jqueryformsconsole
59
Charles Blackwell

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 (parmi les commentaires) de conserver la case à cocher et de la sélectionner intacte!

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

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

Je recommanderais d'utiliser le bon vieux javascript:

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

Il a fallu quelques recherches et lectures pour trouver une méthode adaptée à ma situation. Lors de la soumission du formulaire, exécutez ajax sur un script php distant, informez l'utilisateur de la réussite ou de l'échec, puis complétez le formulaire.

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

Je travaille aussi en ajoutant un bouton de réinitialisation au formulaire, dont l'identifiant est myform:

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

Pour moi, cela a eu le résultat correct sur la réinitialisation du formulaire, 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

4
Jacko

Vous pouvez essayer

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

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

2
madc

J'ai compris ce que c'était! Lorsque j'ai effacé les champs à l'aide de la méthode each (), le champ caché que le php devait exécuter était également effacé:

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

J'ai utilisé le: not () sur la sélection pour l'empêcher de vider le champ caché.

0
Charles Blackwell