How to cancel or reset specific form values?
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 restore only the default values c .
How can I do that?
Refresh . This is not a required button, the <a href=""> link will be fine.
Just set the control value to defaultValue :
<input type="button" value="Reset c" onclick=" var el = this.form.elements['c']; el.value = el.defaultValue; "> This can be done using this code:
document.getElementById('button').onclick = function() { form.elements['c'].value = form.elements['c'].defaultValue; } But first, make sure you provide your element with a button identifier, for example:
<input id="button" type="button" value="Cancel" /> Using this code, you basically tell any element with the c attribute in this form to reset to the default value that it had.
See this jsFiddle.
This will work with your sample code. However, this probably will not be if you have several items that need to be reset; here, javascript gets messy.
jQuery will be much easier to use for multiple elements that need to be reset to their default values.
Here is an easy way to set a value in jQuery:
$('input.reset').live('click', function() { $('input.3').val('3'); }); If you need to determine the value that you want to use in this jQuery code, jQuery is very easy to understand. A
See this jsFiddle.
First of all, I suggest you use a button instead of a reset button. Then you can try it
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 the reset button, you must prevent its default action by calling the event.preventDefault() function.
When loading the page you will need 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 the default values when the button is pressed
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 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 that Teneff responds best, but his implementation is wrong in that it does not meet the requirement that only the selected inputs be reset to default. It is not clear whether the OP is cleared so that other inputs are cleared or not, so I created the clearNonDefaults variable. If set to true , this will clear the value of the other inputs.
// make sure Mozilla 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;