J'ai inséré un formulaire sur une page HTML, qui contient plusieurs champs que l'utilisateur est censé remplir ("nom", "nom de famille", textarea, etc.); J'ai ensuite ajouté un bouton et attribué l'ID cliquez sur à celui-ci: J'ai raccordé la page HTML à un fichier jQuery.
En utilisant JQuery, je souhaite ajouter une fonction Clearall qui efface tous les champs du formulaire lorsque l'utilisateur clique sur le bouton. Je souhaite utiliser une autre fonction principale qui appelle la fonction Clearall lorsque le bouton est cliqué, comme dans les suivants:
5 Réponses :
à l'intérieur de la fonction Vous pouvez cibler le formulaire le plus proche () code> de code> élément code> sur trouver code> tous les éléments pour les effacer comme la voie suivante : <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div>
<label>First Name:</label>
<input type="text" id="first-name">
</div>
<div>
<label>Last Name:</label>
<input type="text" id="last-name">
</div>
<div>
<label>Comments:</label>
<textarea id="comments"></textarea>
</div>
<input type="button" name="button" value="Click" id="cliccami">
</form>
Utilisez la fonction p> .val () code> de jQuery () pour définir la valeur d'un élément d'entrée. Vérifiez l'extrait pour un exemple:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Click" id="cliccami">
Vous pouvez lier votre fonction à l'aide de l'attribut OnClick. Et utiliser la méthode de réinitialisation pour réinitialiser le formulaire entier de cette façon.
p>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Form</h2>
<form id="my-form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea class="form-control" id="comments"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" onclick="main()" class="btn btn-default">Clear All</button>
</form>
</div>Essayez ceci
p>
function clearAll() {
$('#form1 input, #form1 textarea, #form1 select').each(function() {
$(this).val('');
});
}
$("#cliccami").on('click',function(){
clearAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" value="test"> <input type="button" name="button" value="Clear and trigger a function" id="clearit">
De la même manière que vous avez écrit le
principal () un? Ou voulez-vous dire que vous ne savez pas comment effacer les champs avec jQuery?: Entrée sélectionnera tous les éléments formant des entrées. Vous pouvez utiliser cela, jumelé avec des boutons de filtrage et soumet et définir leur valeur sur vide, ou ce que vous voulez.