Link to home
Create AccountLog in
Avatar of skij
skijFlag for Canada

asked on

jQuery: Rest All Form Fields to Original Values

Using jQuery, how can I reset all form fields to their original values?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 $('a').click(function() {
  $('input, select, textarea').val('');
 });
});

</script>
</head>
<body>
 <div>
  <form action="./" name="f" id="f" method="post">
  <input type="text" name="t" value="t" size="30"  />
  <input type="checkbox" name="x" value="1" />
  <input type="checkbox" name="y" value="1" checked="checked" />
  <textarea name="hello">hello</textarea>
  <select name="quantity">
   <option value="1">1</option>
   <option value="2" selected="selected">2</option>
   <option value="3">3</option>
  </select>
  </form>
 <a>Reset Fields</a>
 </div>
</body>
</html>

Open in new window

Avatar of Brant Snow
Brant Snow

Here is a good article on how to do this using jquery for individual fields

http://stackoverflow.com/questions/16925441/reset-button-to-default-value-for-input-box

although i prefer to do this

$("#f")[0].reset();

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Brant Snow
Brant Snow

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account