How to Clear Form Fields With jQuery
To clear form fields using jQuery, you can set their values to an empty string.
This article teaches you two ways that you can use. The first considers checkboxes, while the second does not.
Use CSS Selectors to Clear Form Fields
You can use a combination of CSS selectors to clear HTML form fields in jQuery. Here, the CSS selectors exclude some form fields like radio buttons and checkboxes.
This prevents the accidental clearance of their value attributes that can lead to hard-to-trace bugs. The following will clear your HTML form fields, leaving the value of your checkboxes intact.
Although if they’re checked, the code will uncheck them.
<!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>
Output:
Use jQuery .find() Method to Clear Form Fields
The jQuery .find() method can search for HTML form elements; from there, you can clear their values. Unlike the first example, there are no checkboxes in the form.
And the code will target text inputs and textarea elements, but if you want to, you can add more elements.
<!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>
Output:
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