How to cancel or reset specific form values?

Question

I have this code

  
    

      

    

    <         


        
                      

              相关标签:
       
      

Answer 1

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];
        }
    }
}

Answer 2

Just set the control value to its defaultValue:

<input type="button" value="Reset c" onclick="
  var el = this.form.elements['c'];
  el.value = el.defaultValue;
">

Answer 3

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;

Answer 4

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.

Answer 5

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.