jQuery - Clear All Input:TextFields on Button Click using jQuery

Clear All Input:TextFields using jQuery - In this code snippet, we will learn how to clear all input fields like input text type (input box) and TextArea field on Button Click.

When we design a form, there will be a button "Clear" that will clear all input text boxes and teatarea field, in this example we provide the solution through jQuery. jQuery will be run on button (Clear) click and clear all input text boxes along with textarea field.

jQuery Code Snippet - Clear Input:TextFields on Button Click using jQuery

jQuery/JavaScript

<script>
	$(document).ready(function(){
		$('#btnClear').click(function(){				
			if(confirm("Want to clear?")){
				/*Clear all input type="text" box*/
				$('#form1 input[type="text"]').val('');
				/*Clear textarea using id */
				$('#form1 #txtAddress').val('');
			}					
		});
	});
</script>

HTML Source Code with jQuery/JavaScript

<!--jQuery - Clear All Input:TextFields on Button Click using jQuery.-->
<html>
	<head>
		<title>jQuery - Clear All Input:TextFields on Button Click using jQuery.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		
		<script>
			$(document).ready(function(){
				$('#btnClear').click(function(){				
					if(confirm("Want to clear?")){
						/*Clear all input type="text" box*/
						$('#form1 input[type="text"]').val('');
						/*Clear textarea using id */
						$('#form1 #txtAddress').val('');
					}					
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery - Clear All Input:TextFields on Button Click using jQuery.</h1>
	
		<form id="form1">
			<table border="0px">
				<tr>
					<td>Enter Name</td>
					<td><input  type="text" id="txtName" style="width:200px;"/></td>
				</tr>
				<tr>
					<td>Enter Age</td>
					<td><input type="text" id="txtAge" style="width:50px;"/></td>
				</tr>				
				<tr>
					<td>Enter Address</td>
					<td><textarea   id="txtAddress" cols="40" rows="5"></textarea></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="button" id="btnSubmit" value="Submit"/>
						<input type="button" id="btnClear" value="Clear"/>
					</td>
				</tr>				
			</table>
		</form>
		
	</body>
</html>

Result