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') 

我使用了：不（）上的選擇，從清除隱藏字段阻止它。