Reset Particular Input Element in a HTML Form

html forms reset
SKR picture SKR · Apr 22, 2010 · Viewed 21.5k times · Source

I have multiple input textboxes in my page. I want to reset particular text box to its onload state if certain conditions fails. I am considering using a Hidden element to store the onload state of the textbox. I would other suggestions or solutions to resolve this issue.

Answer

bobince picture bobince · Apr 22, 2010

defaultValue:

<input type="text" value="initial" id="field">
<button id="reset">reset</button>
<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field= document.getElementById('field');
        field.value= field.defaultValue;
    };
</script>

Available on text, password and textarea, plus defaultChecked on checkbox/radio and defaultSelected on option. Curiously, not available on hidden (except in IE, where it's considered a bug).

Related questions

How to clear a form?

For example I have a form like this: <form method='post' action='someaction.php' name='myform'> <input type='text' name='text1'> <input type='text' name='text2'> <input type='checkbox' name="check1"&…

Read More
Why does the reset button on html forms not reset hidden fields?

I discovered something surprising: <html> <head> <script type="text/javascript"> function f() { document.getElementById("h").value++; document.getElementById("x").value++; } </script> </head> <body> <form> <input …

Read More
Set the value of an input field

How would you set the default value of a form <input> text field in JavaScript?

Read More