Javascript 重置包含默认值的整个表单

Question

如何使用 JavaScript 重置 HTML 表单？我的表单实际上包含 PHP 默认值。

我用这个来清除：

        function reset(){
            document.getElementById("moduleform_insert").reset();
        }

在没有<input value="0">的情况下完美运行。

有没有什么方法可以清除或者我应该抓取每个输入值并一一设置为空？

希望有人能给点建议。谢谢

Answer 1

It works perfectly when there is no .

Is there any method that can clear or I should grab each input value and one by one set to empty?

这就是 reset 的工作方式

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

如果你想清除值，那么只需将它们取出并一个一个地清除它们

var form = document.getElementById("moduleform_insert");
var allNumberAndTextInputs = form.querySelectorAll("input[type='number'], input[type='text'] ");
Array.from( allNumberAndTextInputs ).forEach( function( ele ){
  ele.value = ""; //set the value to empty
})

Answer 2

您可以使用 jQuery 来执行此操作。

function reset(){
  jQuery("#moduleform_insert").val('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="moduleform_insert"  value="0" />
<input type="button" onClick="reset();" value="Reset" />

如果您有多个输入元素，您可以将上面的 reset() 函数更改为这个函数，它将遍历所有输入元素并将它们的值设置为空（您可以将容器 ID 或 class 在输入前 jQuery(".container input") ):

function reset(){
  jQuery("input").each(function(){
     jQuery(this).val('');
  });
}

Answer 3

function reset() {
    document.getElementById("Form").reset();
}

<form id="Form">
  <input type="text">
<input type="button" onClick="reset();" value="Reset" />
</form>

Answer 4

var form = $('#myform');
form.find('input:text,textarea,select').val('');
form.find('input:radio,input:checkbox').each(function(){ 
    this.checked = false; 
});

这是基本代码。如果您愿意，可以添加 'input:email'、'input:phone' 等。或者做这样的事情：

form.find('input').not(':hidden,:submit').val('');

Javascript 重置包含默认值的整个表单

Javascript reset the whole form that contains default value

javascript

reset