JavaScript is very complex for writing codes that's why we use jQuery to write less and do more without any issues. If you want to reset form fields on the reset button like a clear text box or Textarea values from the form then you should use the jQuery val() method. I know we use val() method to save the value from the field id to the variable but there is a change in the val() method. You can reset (clear,remove) form fields value using val(' ') method only.
How to reset form fields on a button click in jQuery?
You can reset form fields on a button click-
1. First create a form with input boxes.
2. Create a reset button in the same form.
3. Use jQuery CDN library inside the <head> tag.
4. Write scripts.
5. Use the jQuery ready() function and click() method.
6. Reset value using field id and val() method.
Let's create an example-
<!DOCTYPE html>
<html>
<head>
<title>Reset form fields in jQuery</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#reset_btn").click(function(){
$("#name").val('');
$("#address").val('');
});
});
</script>
<body>
<form>
Name:
<input type="text" name="name" id="name"><br>
Address:
<textarea name="address" id="address"></textarea><br>
<button type="button" name="reset_btn" id="reset_btn">Reset</button>
</form>
</body>
</html>
In the above code, I have created the HTML form. There are two fields and a reset button inside the HTML form. When you will click on the reset button, values will be clear from both HTML form fields.
