jQuery: Reset input to default value when document ready

Using jQuery, how can I reset an input to its default value?  in Firefox, this code makes all inputs blank when the page is refreshed.

<!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>
<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">

history.navigationMode = 'compatible';
$('*').unbind();
$(window).unload(function () {
 scroll(0, 0);
 $('*').unbind();
 $('input[type=text], select, textarea').val('');
});

$(document).ready(function() {

});

</script>
</head>
<body>
 <div>
  <input type="text" size="3" maxlength="2" value="1" />
  <input type="text" size="3" maxlength="2" value="2" />
  <input type="text" size="3" maxlength="2" value="3" />
 </div>
</body>
</html>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
test page : http://jsfiddle.net/vWd7U/
<!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>
<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">

history.navigationMode = 'compatible';
$('*').unbind();
$(window).unload(function () {
 scroll(0, 0);
 $('*').unbind();
});

$(document).ready(function() {
 $(':text,select,textarea').val('');
});

</script>
</head>
<body>
 <div>
  <input type="text" size="3" maxlength="2" value="1" />
  <input type="text" size="3" maxlength="2" value="2" />
  <input type="text" size="3" maxlength="2" value="3" />
 </div>
</body>
</html>

Open in new window

0
 
GaryConnect With a Mentor Commented:
onunload is unreliable
Why would you want to clear the values before the page is refreshed?
0
 
hankknightAuthor Commented:
GaryC123, I am using onunload to demonstrate the problem.  It is one of the ways that form values can get changed.  

leakim971, your code makes the inputs always blank.  They should be reset to the values "1", "2" and "3" respectively every time you refresh the page.
0
 
GaryConnect With a Mentor Commented:
Don't make sense
You're making a problem out of a situation that makes no sense.
If the page is refreshed what does it matter what is in the textboxes, the elements cease to exist.
FF has aggressive caching and will autofill inputs etc with previous values. To stop this you can use autocomplete="off".  If you don't want to do it manually you can use jquery to set the attribute at load time.
0
 
hankknightAuthor Commented:
Thank you both for the help.  With your help I figured it out:
<!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">

history.navigationMode = 'compatible';
$('*').unbind();
$(window).unload(function () {
 scroll(0, 0);
 $('*').unbind();
 $('input[type=text], select, textarea').val('');
});

$(document).ready(function() {

 $('input[value]').each(function() {
  $(this).val($(this)[0].defaultValue);
 });

});

</script>
</head>
<body>
 <div>
  <input type="text" size="3" maxlength="2" value="1" />
  <input type="text" size="3" maxlength="2" value="2" />
  <input type="text" size="3" maxlength="2" value="3" />
 </div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.