Formularfelder mit jQuery löschen
- Verwenden Sie CSS-Selektoren, um Formularfelder zu löschen
-
Verwenden Sie die jQuery-Methode
.find(), um Formularfelder zu löschen
Um Formularfelder mit jQuery zu löschen, können Sie ihre Werte auf eine leere Zeichenfolge setzen.
In diesem Artikel lernen Sie zwei Möglichkeiten kennen, die Sie verwenden können. Die erste berücksichtigt Kontrollkästchen, die zweite nicht.
Verwenden Sie CSS-Selektoren, um Formularfelder zu löschen
Sie können eine Kombination von CSS-Selektoren verwenden, um HTML-Formularfelder in jQuery zu löschen. Hier schließen die CSS-Selektoren einige Formularfelder wie Optionsfelder und Kontrollkästchen aus.
Dies verhindert die versehentliche Löschung ihrer Wert-Attribute, die zu schwer nachvollziehbaren Fehlern führen können. Im Folgenden werden Ihre HTML-Formularfelder gelöscht, wobei der Wert Ihrer Kontrollkästchen intakt bleibt.
Wenn sie aktiviert sind, werden sie vom Code deaktiviert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>
<input type="checkbox" name="engineer" value="engineer" value="engineer"> I am an engineer
</label>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form" class="submit_form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(':input', '#bio_data_form')
.not(':button, :submit, :reset, :hidden')
.prop('checked', false).prop('selected', false)
.not(':checkbox, :radio, select').val('');
});
});
</script>
</body>
</html>
Ausgang:
Verwenden Sie die jQuery-Methode .find(), um Formularfelder zu löschen
Die jQuery-Methode .find() kann nach HTML-Formularelementen suchen; Von dort aus können Sie ihre Werte löschen. Im Gegensatz zum ersten Beispiel enthält das Formular keine Kontrollkästchen.
Und der Code zielt auf Texteingaben und textarea-Elemente ab, aber wenn Sie möchten, können Sie weitere Elemente hinzufügen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-clear-form</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
.form_row {
margin-bottom: 1em;
}
label, input:not([type="submit"]), textarea {
display: block;
width: 50%;
}
</style>
</head>
<body>
<main>
<form id="bio_data_form">
<div class="form_row">
<label for="first_name">First name</label>
<input id="first_name" type="text" name="first_name">
</div>
<div class="form_row">
<label for="last_name">Last name</label>
<input id="last_name" type="text" name="last_name">
</div>
<div class="form_row">
<label>Who are you?</label>
<textarea></textarea>
</div>
<div class="form_row">
<button class="clear_form">Clear form</button>
<input type="submit" name="submit_form" value="Submit form">
</div>
</form>
</main>
<script>
$(document).ready(function() {
$('.clear_form').click(function(e) {
e.preventDefault();
$(this).closest('form').find("input[type=text], textarea").val("");
});
});
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn