1
votes

existe-t-il un moyen d'effacer les champs de formulaire pour un formulaire qui a un identifiant?

Actuellement, les champs de formulaire suivants sont effacés par le jQuery affiché:

Formulaire HTML:

// clear out form fields
$('#add input[name="name"]').val('');
$('#add input[name="model"]').val('');
$('#add input[name="color"]').val('');

jQuery:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

jquery

8 commentaires

$ ('# add'). reset ()

@bassxzero Est-ce que jQuery a une fonction reset () ?

@ j08691 Je pense que jquery le fait, mais sinon, vanilla JS le fait

@bassxzero Je ne pense pas que ce soit le cas, et vous ne pouvez pas utiliser la méthode native directement sur un objet jQuery

$ ('# add') [0] .reset ()

@ j08691 Merci d'avoir signalé mon erreur avec . Je laisserai le message original tel quel pour que les autres puissent lire votre commentaire et voir le contexte, mais je le corrigerai dans mon projet.

@bassxzero Que fait le [0] ?

@ knot22 il sélectionne le premier objet JS vanilla de la collection jquery.

4 Réponses :

0
votes

Si vous ajoutez une classe aux balises d'entrée que vous souhaitez effacer, ce serait assez simple comme ci-dessous. Vous pouvez également utiliser des cas conditionnels pour effacer les valeurs à l'intérieur des formulaires.

Code HTML:

$('.clearMe').val('');

Jquery:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" class="clearMe" name="name" id="add_name" value="rarara"/>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" class="clearMe" name="model" id="add_model" value="bababa"/>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" class="clearMe" name="color" id="add_color" value="tataata"/>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

jsfiddle

0 commentaires

1
votes

Supprimez l'attribut type = "reset". Parce que cette attribution vous en empêche.

Cette méthode attribue la valeur souhaitée à tous les champs de texte du formulaire que vous spécifiez.

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button onClick="ClearTextInputs('add')">Cancel</button>
</form>

<script>
function ClearTextInputs(formId){
    //$("#"+formId+" input:text").val("You Value"); //New Value
      $("#"+formId+" input:text").val(""); //Remove value
    }
</script>

0 commentaires

0
votes

J'ai fini par utiliser ceci: $('#add').trigger('reset');

Voir ce lien , en particulier la réponse de @ user768680 du 17 mars 2013 à 18h45.

0 commentaires

0
votes

Vous pouvez directement obtenir un groupe de input [type = text] et les réinitialiser tous ensemble.

CODE HTML:

function clearMe() { 
    $('form').find("input[type=text]").reset();
}

JS:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button onClick="clearMe()">Cancel</button>
</form>

0 commentaires