Question

我有这段代码

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

我希望“取消”按钮仅恢复默认值c。

如何做到这一点？

更新：它不一定是一个按钮，<a href="">链接没问题。

Answer 1

只需将控件值设置为defaultValue：

即可

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

Answer 2

这可以通过使用以下代码来完成：

document.getElementById('button').onclick = function() { 
  form.elements['c'].value = form.elements['c'].defaultValue;
}

但首先要确保给元素一个ID按钮，例如：

<input id="button" type="button" value="Cancel" />

通过使用此代码，您基本上会在此表单中将具有c属性的任何元素重置为其具有的默认值。

请参阅this jsFiddle。

这将适用于您的示例代码。但是，如果您有多个需要重置的项目，它可能不会;这是Javascript变得混乱的地方。

对于需要重置为默认值的多个项目，jQuery将更加简单。

这是在jQuery中设置值的简单方法：

$('input.reset').live('click', function() {

   $('input.3').val('3');

});

在需要定义此jQuery代码中的值时，jQuery很容易理解。甲

请参阅this jsFiddle。

Answer 3

首先，我建议您使用按钮而不是重置按钮。然后你可以试试这个

document.getElementById('button').onclick = function() {
    var inputs = document.getElementsByName('s');
    for (var i = 0; ii = inputs.length; i < ii; i++) {
        inputs[i].value = '';
    }
}

但是，如果您想使用重置按钮，则应通过调用event.preventDefault()函数来阻止其默认操作。

Answer 4

加载页面时，您必须收集javascript数组中的所有值

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

并在单击按钮取消时返回默认值

var cancel = document.getElementById('cancel');
cancel.onclick = function() {
    for(i=0; i<elements.length; i++) {
        elements[i].value = defaults[elements[i].name];
    }
}

编辑：对于重置按钮，您可以使用

<input type="button" id="reset" />

编辑2：如果您想重置输入c的值，则可以使用此值：

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 5

我最喜欢Teneff的答案，但是他的实现存在缺陷，因为它不符合仅将所选输入重置为默认值的要求。目前还不清楚OP是否希望清除其他输入，因此我创建了clearNonDefaults变量。设置为true时，将清除其他输入的值。

// 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;

如何取消或重置特定表格值？

5 个答案: