Question

当我调用表单的reset()方法时，为什么没有重置具有value属性的第二个输入？清除包含具有值属性输入的表单的最佳方法是什么？

<form id="myform">
  <input type="text" />
  <input type="text" value="1" />
  <button id="reset" name="reset" onclick="document.getElementById('myform').reset()">reset</button>
</form>

Answer 1

您在这里不需要JavaScript。只需将按钮的type属性设置为reset。

<form>
  <input type="text" />
  <input type="text" value="1" />
  <button id="reset" name="reset" type="reset">reset</button>
</form>

默认情况下，button中的form元素将提交表单。

Answer 2

使用JQuery

$("#reset").on("click" , function() {
   $("input[type=text]").val("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" />
  <input type="text" value="1" />
  <button id="reset" name="reset" type="button">reset</button>
</form>

Answer 3

重置按钮将表单重置为初始值，而不是空值。如果要完全重设表单，则应使用空白表单，然后在将表单放置到文档中之后手动设置值。例如，将ID应用于您要预设的字段，然后使用

const filedValues = [{
    id: 'name',
    value: '1'
  },
  {
    id: 'text',
    value: 'test text'
  }
];
filedValues.forEach(fieldItem => {
  const {
    id,
    value
  } = fieldItem;
  document.getElementById(id).value = value;
})

<form>
  <input type="text" id="name" name="name" />
  <input type="text" name="text" id="text" />
  <button id="reset" name="reset" type="reset">reset</button>
</form>

Answer 4

仅一个行代码：

this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})

请参阅：

<form>
  <input type="text" value="0"/>
  <input type="text" value="1" />
  <button id="reset" name="reset" onclick="this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})">reset</button>
</form>

注意：无需将type=reset添加到button

窗体的reset（）方法不会使用value属性重置输入

4 个答案: