I have this code
<html>
<body>
<form name="form" action="" method="POST">
<div align="center">
<br>
<input type="text" name="a" size="25" value="1"><br>
<input type="text" name="b" size="25" value="2"><br>
<input type="text" name="c" size="25" value="3"><br>
<input type="submit" value="Submit">
<input type="button" value="Cancel"><br>
</div>
</form>
</body>
</html>
and I would like the Cancel button to only restore the default values of c.
How can this be done?
Update: It doesn't have to be a button, an <a href=""> link would be fine.
I have this code
<html>
<body>
<form name="form" action="" method="POST">
<div align="center">
<br>
<input type="text" name="a" size="25" value="1"><br>
<input type="text" name="b" size="25" value="2"><br>
<input type="text" name="c" size="25" value="3"><br>
<input type="submit" value="Submit">
<input type="button" value="Cancel"><br>
</div>
</form>
</body>
</html>
and I would like the Cancel button to only restore the default values of c.
How can this be done?
Update: It doesn't have to be a button, an <a href=""> link would be fine.
- Are you familiar with jQuery? It would be easier for you to understand. – ryryan Commented Apr 19, 2011 at 13:43
- Came across this from a chain of other duplicate questions. This seems to be oldest that I can find which is still relatively active (within past year, the others from '12 and prior haven't had activity for 3+ years). Please see my answer for an alternative, updated (some HTML5, ES5 etc.) approach – Eric Lease Commented Jan 21, 2016 at 7:22
5 Answers
Reset to default 3Just set the control value to its defaultValue:
<input type="button" value="Reset c" onclick="
var el = this.form.elements['c'];
el.value = el.defaultValue;
">
This can be done by using this code:
document.getElementById('button').onclick = function() {
form.elements['c'].value = form.elements['c'].defaultValue;
}
But first make sure you give your element an ID of button, such as:
<input id="button" type="button" value="Cancel" />
By using this code, you're basically saying any element with an attribute of c, within this form, to reset to the default value which it had.
See this jsFiddle.
This will work with your example code. However, it probably wont if you have multiple items that need resetting; this is where Javascript gets messy.
jQuery will be much simpler to use for multiple items which need resetting to default value.
Here's a simple way to set the value in jQuery:
$('input.reset').live('click', function() {
$('input.3').val('3');
});
Where as you need to define the value you want to have in this jQuery code, jQuery is very simple to understand. A
See this jsFiddle.
When you load the page you will have to collect all the values in a javascript array
var defaults = new Array();
var elements;
window.onload = function(){
elements = document.getElementsByTagName("input");
for (i=0; i<elements.length; i++) {
defaults[elements[i].name] = elements[i].value;
}
}
and return to defaults when the button cancel is clicked
var cancel = document.getElementById('cancel');
cancel.onclick = function() {
for(i=0; i<elements.length; i++) {
elements[i].value = defaults[elements[i].name];
}
}
Edit: for reset button you can use
<input type="button" id="reset" />
Edit 2: if you want to reset only the value if the input c you can use this:
var cancel = document.getElementById('cancel');
cancel.onclick = function() {
for(i=0; i<elements.length; i++) {
if (elements[i].name == "c") {
elements[i].value = defaults[elements[i].name];
}
}
}
I like Teneff's answer the best, however his implementation is flawed in that it doesn't fit the requirement that only selected inputs are reset to defaults. It is unclear as to whether the OP wanted other inputs to be cleared or not, so I created the clearNonDefaults variable. When set to true this will clear the value of other inputs.
// make sure Mozilla's very handy array extension is implemented
if(Array.prototype.indexOf === undefined)
{
Array.prototype.indexOf = function(val)
{
for (var i = 0; i < this.length; i++)
{
if(this[i] == val)
return i;
}
return -1;
};
}
var inputsToRestore, clearNonDefaults, defaults = [], elements = [];
// if you want to empty the values of inputs other than those listed in inputsToRestore, set to true.
clearNonDefaults = false;
// if you ever want to add more, just place the name in this array.
inputsToRestore = ['c'];
function onLoadHandler () {
elements = document.getElementsByTagName('input');
for (i=0; i<elements.length; i++) {
if(inputsToRestore.indexOf(elements[i].name) > -1) {
defaults[elements[i].name] = elements[i].value;
}
}
}
function resetHandler () {
for(i=0; i<elements.length; i++) {
if(inputsToRestore.indexOf(elements[i].name) > -1) {
elements[i].value = defaults[elements[i].name];
} else if( clearNonDefaults === true) {
elements[i].value = '';
}
}
}
window.onload = onLoadHandler;
document.getElementById('reset').onclick = resetHandler;
First of all, I suggest you use a button instead of a reset button. Then you can try this
document.getElementById('button').onclick = function() {
var inputs = document.getElementsByName('s');
for (var i = 0; ii = inputs.length; i < ii; i++) {
inputs[i].value = '';
}
}
However, if you want to use a reset button, you should prevent its default action by calling event.preventDefault() function.