jQuery：清除表单input
我试图用不同的方式来清除表单：
<form action="service.php" id="addRunner" name="addRunner" method="post"> First Name: <input type="text" name="txtFirstName" id="txtFirstName" /><br /> Last Name: <input type="text" name="txtLastName" id="txtLastName" /><br /> Gender: <select id="ddlGender" name="ddlGender"><option value="">--Please Select--</option> <option value="f">Female</option> <option value="m">Male</option> </select><br /> Finish Time: <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2">(Minutes) <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2">(Seconds) <br /> <button type="submit" name="btnSave" id="btnSave">Add Runner</button> <input type="hidden" name="action" value="addRunner" id="action"> </form> jQuery＃1：
function clearInputs(){ $("#txtFirstName").val(''); $("#txtLastName").val(''); $("#ddlGender").val(''); $("#txtMinutes").val(''); $("#txtSeconds").val(''); }
这完美的作品。
jQuery＃2：
function clearInputs(data){ $("#addRunner :input").each(function(){ $(this).val(''); });
这清除了表格，但不让我再提交任何信息。 我尝试再次点击button，它什么都不做。
这里是button点击处理程序：
$("#btnSave").click(function(){ var data = $("#addRunner :input").serializeArray(); $.post($("#addRunner").attr('action'), data, function(json){ if (json.status == "fail"){ alert(json.message); } if (json.status == "success"){ alert(json.message); clearInputs(); } }, "json"); });
PHP邮编：
<?php if($_POST){ if ($_POST['action'] == 'addRunner') { $fname = htmlspecialchars($_POST['txtFirstName']); $lname = htmlspecialchars($_POST['txtLastName']); $gender = htmlspecialchars($_POST['ddlGender']); $minutes = htmlspecialchars($_POST['txtMinutes']); $seconds = htmlspecialchars($_POST['txtSeconds']); if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) { fail('Invalid name provided.'); } if( empty($fname) || empty($lname) ) { fail('Please enter a first and last name.'); } if( empty($gender) ) { fail('Please select a gender.'); } if( empty($minutes) || empty($seconds) ) { fail('Please enter minutes and seconds.'); } $time = $minutes.":".$seconds; $query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender', finish_time='$time'"; $result = db_connection($query); if ($result) { $msg = "Runner: ".$fname." ".$lname." added successfully" ; success($msg); } else { fail('Insert failed.'); } exit; }
}
如果我使用jQuery方法＃2，我在控制台中得到这个错误：
Uncaught TypeError: Cannot read property 'status' of null
为什么会这样呢？
我忘了包含这个关键信息：
function fail ($message){ die(json_encode(array('status'=>'fail', 'message'=>$message))); } function success ($message){ die(json_encode(array('status'=>'success', 'message'=>$message)));
这将消息发送回jQuery中的AJAX函数。 看起来好像在我使用方法＃2提交表单之后，成功/失败的消息被清空了。
演示： http : //jsfiddle.net/xavi3r/D3prt/
$(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected');
原始答案： 使用jQuery重置多阶段表单
迈克的build议（从评论）保持checkbox，并select完好！
警告：如果你正在创build元素（所以他们不在DOM），replace:hidden的[type=hidden]或所有的字段将被忽略！
$(':input','#myform') .removeAttr('checked') .removeAttr('selected') .not(':button, :submit, :reset, :hidden, :radio, :checkbox') .val('');
我会推荐使用好老的javascript：
document.getElementById("addRunner").reset();
花了一些search和阅读find一个适合我的情况的方法，在表单提交，运行ajax到远程php脚本，成功/失败告知用户，完全清除表单。
我有一些默认值，所有其他涉及.val（''），因此不重置，但清除表单的方法。
我通过添加一个重置button来获得这个工作，该表单具有myform的id：
$("#myform > input[type=reset]").trigger('click');
这对我来说，在重置表单的时候有了正确的结果哦，不要忘了
event.preventDefault();
停止在浏览器中提交表单，就像我做的:)。
问候
jackson
你可以试试
$("#addRunner input").each(function(){ ... });
input不是select器，所以你不需要:没有用你的代码testing它。 只是一个快速的猜测！
我想清楚它是什么！ 当我使用each（）方法清除字段时，它也清除了php需要运行的隐藏字段：
if ($_POST['action'] == 'addRunner')
我使用：not（）在select停止清除隐藏的领域。
