[英]Reset button to clear form fields
我有以下代码:
<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 参数设置)的非空值,则该字段不会清除。
在http://www.384thbombgroup.com/_content/_pages/NARA%20Data.php上实时观察
有什么建议么?
将您的按钮更改为:
<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/
此方法不仅适用于您的表单,而且适用于您将拥有的所有其他表单。
我已将类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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.