Question

我有以下代码：

<form id="selectform" method="post">
    From Box #: <input id="from" type="text" style="width: 40px;" name="from" value="<?php echo $from;?>" />
    To Box #: <input id="to" type="text" style="width: 40px;" name="to" value="<?php echo $to;?>" />
    <button type="submit">UPDATE</button>
    <button onkeydown="document.getElementById('from').value=null;document.getElementById('selectform').reset;" type="reset">CLEAR ENTRY</button>
</form>

当我按下RESET按钮时，如果输入字段id =“from”的默认值被设置为来自$ from变量的非空值（由POST参数设置），则该字段不会清除。 / p>

在http://www.384thbombgroup.com/_content/_pages/NARA%20Data.php

现场观察

有什么建议吗？

Answer 1

简单解决方案

将按钮更改为：

<button onclick="document.getElementById('selectform').reset(); document.getElementById('from').value = null; return false;">
    CLEAR ENTRY
</button>

以下是我改变的内容：

该活动应为onclick而不是onkeydown。
您必须在更改输入值之前触发重置，否则在更改值后，它将重置为默认值。
删除type="reset"，这不是必需的。
添加return false，以便该按钮不会处理该事件。

这是一个有效的演示：https://jsfiddle.net/hat3bxd8/

解决方案2

此方法不仅适用于您的表单，还适用于您将拥有的所有其他表单。

我在按钮上添加了一个类reset，会触发重置。

<form id="selectform" method="post">
    From Box #: <input id="from" type="text" style="width: 40px;" name="from" value="test" />
    To Box #: <input id="to" type="text" style="width: 40px;" name="to" value="test2" />
    <button type="submit">UPDATE</button>
    <button class="reset">CLEAR ENTRY</button>
</form>

在JavaScript中，您可以添加点击事件：

// Get all the reset buttons from the dom
var resetButtons = document.getElementsByClassName('reset');

// Loop through each reset buttons to bind the click event
for(var i=0; i<resetButtons.length; i++){
  resetButtons[i].addEventListener('click', resetForm);
}

/**
 * Function to hard reset the inputs of a form.
 *
 * @param object event The event object.
 * @return void
 */
function resetForm(event){

  event.preventDefault();

  var form = event.currentTarget.form;
  var inputs = form.querySelectorAll('input');

  inputs.forEach(function(input, index){
    input.value = null;
  });

}

这是一个有效的演示：https://jsfiddle.net/2at4nhLa/

重置按钮以清除表单域

1 个答案:

简单解决方案

解决方案2