9

我正在使用一个表单和一个重置按钮，我可以在其中重置所有输入的值，但它根本不起作用。

illegal character当我使用 Firefox 控制台选项卡进行调试时，我在 jQuery 脚本的末尾看到了一个错误。有人可以告诉我这里有什么错误吗？

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="js/jquery1.7.2.js"></script>
</head>
<body>
  <script type="text/javascript">
    jQuery('#reset').click(function(){
        $(':input','#myform')
        .not(':button, :submit, :reset, :hidden')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
    });​
</script>
<form id='myform'>
  <input type='text' value='test' />
    <select>
      <option>One</option>
      <option selected="true">Two</option>
    </select>
    <select multiple="true" size="5">
      <option>One</option>
      <option selected="true">Two</option>
    </select>
    <input type='button' id='reset' value='reset' />
</form>​
</body>
</html>
4

4 回答 4

13

还<input type="reset" >不够吗？

<form>

   <input type='reset'  />

</form>

演示

于 2012-08-30T06:39:02.553 回答
12

尝试以下操作：

$(function() {
    $('#reset').click(function() {
        $(':input','#myform')
            .not(':button, :submit, :reset, :hidden')
            .val('')
            .removeAttr('checked')
            .removeAttr('selected');
    });
});

在 DOM 准备好之前，您正在运行 javascript。$(function() {})仅在 DOM 准备好时运行。在这里阅读更多：.ready()

于 2012-08-30T06:35:09.930 回答
8

用于重置表单字段的另一个 jQuery 解决方案是：

$('#form')[0].reset(); or $('#form').get(0).reset();

另一个更具体的，指的是必填字段：

$('#form').find('input, select').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

jsFiddle 工作现场演示- jQuery 解决方案

仅使用 JavaScript：

document.getElementById('form').reset();

仅使用 HTML：

正如其中一个答案中提到的那样，在大多数情况下，您不需要 JavaScript 来重置表单字段，它只需通过type="reset"按钮设置即可工作，例如：

<button type="reset" value="Reset">Reset</button>
于 2012-08-30T06:48:49.360 回答
0

下面的 JQuery 将重置所有文本和下拉列表；

只需将#YourID替换为您要重置的字段/输入的 ID，对于多个输入，复制行并在适当的位置添加 ID

$(".btn-reset").click(function () { 
    $(this).closest('form').find("input[type=text], textarea").val(""); 
    $('#YourID').removeAttr('selected').find('option:eq(0)').prop('selected', true); 
});
于 2019-06-25T15:28:08.213 回答