Comment effacer un formulaire?
Par exemple j'ai un formulaire comme ceci:
<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>
quand j'appuie sur Reset il vide tous les champs. Mais si je remplis certains champs en utilisant URL params et puis appuyez sur Reset, il ne vide que les champs que j'entre après le rechargement du formulaire.
Comment puis-je vider tous les champs si certains champs sont déjà remplis au moment du chargement du formulaire.
9 réponses
Comme d'autres l'ont signalé, je pense que vous devriez reconsidérer la nécessité de vide 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 le hidden entrées. La plupart du temps, ce n'est pas nécessaire.
Pour que cela fonctionne, vous devez appeler la fonction de la onclick gestionnaire d'un bouton (ou d'une autre façon), comme par exemple ceci:
<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
Vous pouvez tester tous ici jsFiddle.
si vous utilisez jQuery dans votre projet, vous pouvez le faire avec beaucoup moins de code (et pas besoin de changer le 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 aussi que je n'efface pas le valeurs d'entrées cachées, de cases à cocher et de boutons radio.
Jouer avec ce ici.
En jquery simplement que vous pouvez utiliser,
$("#yourFormId").trigger('reset');
vous devrez les effacer tous par javascript (ou effacer du côté du serveur).
reset bouton réinitialiser uniquement les éléments de formulaire à leur valeur initiale - si c'était une valeur spécifique, c'est ce qu'il sera réinitialisé.
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 l' :caché de la .pas de sélecteur, si vous souhaitez effacer les champs cachés.
la façon la plus simple de vider un formulaire est d'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>
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 la lib jquery dans la section d'en-tête et ajouté un onclick handler au bouton Reset. Enfin, j'ai ajouté le code javascript basé sur les commentaires de certains autres réponses ici.
j'ai aussi ajouté un valeur prédéfinie pour un champ de texte. val('') fonction ne serait pas clair un tel champ, qui est pourquoi j'ai ajouté attr('value','') à la dernière ligne du script effacer ces valeurs par défaut.
vous pouvez faire quelque chose de similaire dans JS et l'appeler de onclick au sein de 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 n'ajoutiez return false juste après l'appel.
je viens de tomber sur cette question et ont utilisé un <a> pour faciliter la suppression d'un formulaire en rechargeant la page. Il est facile de style <a> élément d'apparaître comme un bouton.
e.g.
<a href="?" class="btn btn-default">Clear</a>
En utilisant ? pour l'attribut href, l' <a> va recharger la page depuis le serveur sans la soumettre.
je préfère les solutions qui ne dépendent pas de JavaScript donc j'espère que c'est utile à quelqu'un.
en utilisant JavaScript, donnez au formulaire un ID de 'myform':
document.getElementById ("myform").reset ();