如何重置输入字段？ jQuery
Posted
技术标签:
【中文标题】如何重置输入字段？ jQuery【英文标题】：How to reset input field? jQuery 【发布时间】：2016-05-31 05:51:23 【问题描述】：我已经阅读了几篇帖子，包括this 和this，但我似乎无法在提交后清除输入字段。最基本/最基本的方法是什么？
目前我有这个：
$(document).ready(function()
$('form[name=checkListForm]').on('submit', function()
// prevent the form from submitting
event.preventDefault();
var toAdd = $(this).find('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>")
$('input[name=checkListItem').reset();
);
);
我的 html 是：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
<button type="submit" id="button">Add!</button>
</form>
<br/>
<div class="list"></div>
</body>
</html>
【问题讨论】：
单行代码处理所有字段$(formselector)[0].reset();
【参考方案1】：
不用重置，只需使用这段代码为输入字段设置一个空白值：
$('input[name=checkListItem').val('');
为了以特定形式重置所有输入，您还可以使用以下代码（使用 :input 选择器）：
$('form :input').val('');
【讨论】：
谢谢，成功了。作为一个附带问题，你知道为什么选择器应该是input[name=checkListItem 而不是form[name=checkListForm吗？
@AlanH：因为您想将输入的值设置为空白，而不是表单。
@AlanH ：那是因为 input 选择器基本上选择了一个表单控件，并且它有一个可以设置的值，而 $('form') 基本上意味着您选择的是 html 元素本身而不是表单控件，因为 $('form') 没有与 input 选择器不同的 value 属性，请参阅我对答案的最新编辑。
当您使用element[attribute=value] 过滤元素/节点时 - 即它会选择所有类型为element 然后从那些中，只有[attribute=value] 所以form[name] 找到所有具有名称属性的表单。如果你做了form [name]（即带空格），那么它会在表单中找到所有具有 name 属性的元素。
$('input[name=checkListItem]').val('');你错过了 ']' ;)【参考方案2】：
这应该可行，（我自己测试过）。
$(document).ready(function()
$('form[name=checkListForm]').on('submit', function()
//other code
$('input[name=checkListItem]').val("")
);
);
【讨论】：
【参考方案3】：这个对我有用；很少修改。我使用function(e) 和e.preventDefault() 并使用$('input[name=checkListItem').val(''); 而不是reset()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function()
$('form[name=checkListForm]').on('submit', function(e)
// prevent the form from submitting
e.preventDefault();
var toAdd = $(this).find('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>")
$('input[name=checkListItem').val('');
);
);
</script>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
<button type="submit" id="button">Add!</button>
</form>
<br/>
<div class="list"></div>
【讨论】：
【参考方案4】：提交后再写。
document.getElementById("myform").reset();
【讨论】：
【参考方案5】：最后，这对我有用。
$(document).ready(function()
$('#myForm').on('submit', function()
$('#checkListItem').val('');
);
);
【讨论】：
以上是关于如何重置输入字段？ jQuery的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery 选择所有输入，不是提交、重置或按钮？