web-dev-qa-db-fra.com

Comment effacer un formulaire?

Par exemple, j'ai un formulaire comme celui-ci:

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1'>
<input type='text' name='text2'>

<input type='checkbox' name="check1">Check Me

<textarea rows="2" cols="20" name='textarea1'></textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>

</form>

Lorsque j'appuie sur Reset, tous les champs sont vides. Mais si je renseigne certains champs à l’aide des paramètres d’URL, puis que j’appuie sur Reset, cela ne vide que les champs que j’ai entrés après le rechargement du formulaire. 

Comment puis-je vider tous les champs si certains champs sont déjà renseignés au moment du chargement du formulaire?.

htmlformsreset
15
Student

Comme d'autres l'ont souligné, je pense que vous devriez reconsidérer la nécessité de blanc le formulaire . Mais si vous avez vraiment besoin de cette fonctionnalité, c'est une façon de le faire:

Javascript simple:

function resetForm(form) {
    // clearing inputs
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i<inputs.length; i++) {
        switch (inputs[i].type) {
            // case 'hidden':
            case 'text':
                inputs[i].value = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false;   
        }
    }

    // clearing selects
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i<selects.length; i++)
        selects[i].selectedIndex = 0;

    // clearing textarea
    var text= form.getElementsByTagName('textarea');
    for (var i = 0; i<text.length; i++)
        text[i].innerHTML= '';

    return false;
}

Notez que j'ai commenté le cas dans lequel j'efface les entrées hidden. La plupart du temps, ce n'est pas nécessaire.

Pour que cela fonctionne, vous devez appeler la fonction à partir du gestionnaire onclick d'un bouton (ou d'une autre manière), par exemple. comme ça:

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

Vous pouvez tout tester ici jsFiddle .

Si vous utilisez jQuery dans votre projet, vous pouvez le faire avec beaucoup moins de code (et pas besoin de changer le code HTML):

jQuery(function($) { // onDomReady

    // reset handler that clears the form
    $('form[name="myform"] input:reset').click(function () {
        $('form[name="myform"]')
            .find(':radio, :checkbox').removeAttr('checked').end()
            .find('textarea, :text, select').val('')

        return false;
    });

});

Notez également que je ne supprime pas les valeurs values ​​ des entrées masquées, des cases à cocher et des boutons radio.

Jouez avec ceci ici .

20
Marko Dumic

Dans jQuery, vous pouvez simplement utiliser,

$("#yourFormId").trigger('reset');
8
tutesFree

Vous devrez tous les effacer par javascript (ou effacer le côté serveur).

Le bouton reset ne réinitialisera que les éléments de formulaire à leur valeur initiale - s'il s'agissait d'une valeur spécifique, c'est sur quoi il sera réinitialisé.

6
Oded

Si vous utilisez jQuery, le code est beaucoup plus simple:

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

Vous pouvez également supprimer le sélecteur: hidden du sélecteur .not si vous souhaitez également effacer les champs masqués.

1
Francis Lewis

J'ai résumé certaines des suggestions en utilisant jQuery pour donner une solution plus complète à la question:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo Forms</title>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>

        <form method='post' action='someaction.php' name='myform'>

            <input type='text' name='text1'>
            <input type='text' name='text2' value='preset value'>

            <input type='checkbox' name="check1">Check Me

            <textarea rows="2" cols="20" name='textarea1'></textarea>

            <select name='select1'>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>

            <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
            <input type='submit' value='Submit' name='submit'>

            <script>
                function clearForm(form) {
                    var $f = $(form);
                    var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                    $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                }
            </script>
        </form>
    </body>
</html>

Notez que j'ai ajouté l'inclusion de jquery lib dans la section head et ajouté un gestionnaire onclick au bouton de réinitialisation. Enfin, j'ai ajouté le code javascript basé sur les commentaires d'autres réponses ici.

J'ai également ajouté une valeur prédéfinie à un champ de texte. La fonction val('') n'effacerait pas un tel champ, c'est pourquoi j'ai également ajouté attr('value','') à la dernière ligne de script pour efface ces valeurs par défaut .

0
Thomas Tempelmann

Le moyen le plus simple d'effacer un formulaire consiste à utiliser la balise HTML.

<input type="reset" value="Reset">

Exemple:

<form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>
0
ociugi

Vous pouvez faire quelque chose de similaire à cela dans JS et l'appelez de onclick dans votre bouton: 

function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

Et puis dans votre fichier HTML: 

<button id="submit" onclick="submit(); return false">SIGN UP</button>

Si vous utilisez cette solution avec Firebase, elle n'enverra rien à la base de données à moins que vous ajoutiez return false juste après l'appel.

0
mur7ay