jQuery的：清除表单输入

Question

我曾尝试不同的方法来清除表单：

<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(''); 
}); 

这将清除的形式，但并不让我更多的任何信息提交给它。我尝试再次点击按钮，它什么都不做。

这里的按钮单击处理程序：

$("#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提交表单之后，成功/失败消息将被清空。

Answer 1

演示：http://jsfiddle.net/xavi3r/D3prt/

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

原来的答案：Resetting a multi-stage form with jQuery

---

麦克的建议（从评论），以保持复选框，并选择完整！

警告：如果您要创建的元素（所以他们不是在DOM），更换:hidden与[type=hidden]或所有字段将被忽略！

$(':input','#myform') 
    .removeAttr('checked') 
    .removeAttr('selected') 
    .not(':button, :submit, :reset, :hidden, :radio, :checkbox') 
    .val(''); 

Answer 2

您可以尝试

$("#addRunner input").each(function(){ ... }); 

输入是没有选择，所以你不需要: 有没有你的代码进行了测试。只是一个快速的猜测！

Answer 3

我会使用电子书籍好老的javascript：

document.getElementById("addRunner").reset(); 

Answer 4

采取了一些搜索和阅读找到适合我的情况的方法，在表单提交，运行AJAX到远程PHP脚本，上成功/失败通知用户，完整清除表格。

我有一些默认值，参与.VAL（“”），从而不进行重置，但清除表单中的所有其他方法。

我这也加入了复位按钮的形式，它具有myform一个id工作：

$("#myform > input[type=reset]").trigger('click'); 

这对我对重置形成正确的结果，噢，不要忘了

event.preventDefault(); 

停止窗体在浏览器中提交，就像我做的:)。

问候

杰克逊

Answer 5

我想通了，这是什么！当我清除使用每个（）方法的领域中，也被清除的隐藏字段，它的PHP的需要运行：

if ($_POST['action'] == 'addRunner') 

我使用了：不（）上的选择，从清除隐藏字段阻止它。