Borrar campos de formulario con jQuery
- Usar selectores de CSS para borrar campos de formulario
-
Use el método jQuery
.find()para borrar campos de formulario
Para borrar campos de formulario con jQuery, puede establecer sus valores en una cadena vacía.
Este artículo le enseña dos formas que puede usar. El primero considera casillas de verificación, mientras que el segundo no.
Usar selectores de CSS para borrar campos de formulario
Puede usar una combinación de selectores de CSS para borrar campos de formulario HTML en jQuery. Aquí, los selectores de CSS excluyen algunos campos de formulario como botones de opción y casillas de verificación.
Esto evita la eliminación accidental de sus atributos de valor que pueden generar errores difíciles de rastrear. Lo siguiente borrará los campos de su formulario HTML, dejando intacto el valor de sus casillas de verificación.
Aunque si están marcados, el código los desmarcará.
<!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>
Producción:
Use el método jQuery .find() para borrar campos de formulario
El método jQuery .find() puede buscar elementos de formulario HTML; a partir de ahí, puede borrar sus valores. A diferencia del primer ejemplo, no hay casillas de verificación en el formulario.
Y el código apuntará a entradas de texto y elementos textarea, pero si lo desea, puede agregar más elementos.
<!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>
Producción:
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