如何取消或重置特定的表单值？答案

【问题标题】：How to cancel or reset specific form values?如何取消或重置特定的表单值？
【发布时间】：2011-04-19 12:53:14
【问题描述】：

我有这个代码

<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=""> 链接就可以了。

【问题讨论】：

你熟悉 jQuery 吗？你会更容易理解。
从一系列其他重复的问题中发现了这个问题。这似乎是我能找到的仍然相对活跃的最古老的（在过去的一年中，12 年及之前的其他人已经有 3 年以上没有活动了）。请参阅my answer 了解替代的更新（某些 HTML5、ES5 等）方法

标签： javascript html

【解决方案1】：

只需将控制值设置为其defaultValue：

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

【讨论】：

是否可以扩展以重置 C 和 B，使其可以扩展到许多应该重置的值？
避免内联点击处理程序，让它成为javascript

【解决方案2】：

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

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

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

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

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

见thisjsFiddle。

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

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

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

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

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

});

当您需要在此 jQuery 代码中定义您想要的值时，jQuery 非常易于理解。一个

见thisjsFiddle。

【讨论】：

【解决方案3】：

当您加载页面时，您必须将所有值收集到一个 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];
        }
    }
}

【讨论】：

唯一的缺陷是 OP 只对默认名称为“c”的输入值感兴趣。但我认为这种方法是最好的。

【解决方案4】：

我最喜欢 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】：

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

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() 函数来阻止其默认操作。

【讨论】：