How to reset form in Jquery

<!DOCTYPE html>
<html>
<head>
	<title>reset form in jqery</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1 align="center">Type something in Input field and click "Reset this form" button</h1>

<form class="my-form">
	<input type="text" name="firstname" placeholder="Your first name">
	<input type="text" name="lastname" placeholder="Your last name">
	<input type="email" name="email" placeholder="Type email here">
	<input type="submit" value="Register">
</form>

<br><br>
<button class="reset-btn">Reset this form</button>

<script>
	$(document).ready(function(){
		$(".reset-btn").click(function(){
			$(".my-form").trigger("reset");
		});
	});
</script>
</body>
</html>

Live example

Type something in Input field and click "Reset this form" button

Default values set to the INPUT field using value="something" can not be reset by this method.

How to reset form in Jquery

Type something in Input field and click "Reset this form" button

Publish A Comment

Leave a Reply Cancel reply