jQuery: Usuwanie Formularz Wejścia

Question

Próbowałem różnych sposobów, aby usunąć postać:

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

to działa doskonale.

jQuery # 2:

function clearInputs(data){ 
$("#addRunner :input").each(function(){ 
$(this).val(''); 
}); 

ten czyści formularz, ale nie pozwól mi przedstawić żadnych więcej informacji do niego. Próbuję ponownie kliknąć przycisk i nic nie robi.

Oto obsługi kliknięcie przycisku: Kod

$("#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 Post:

<?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; 
} 

}

Jeśli używam metody jQuery # 2, otrzymuję ten błąd w konsoli:

Uncaught TypeError: Cannot read property 'status' of null 

Dlaczego tak się dzieje?

zapomniałem włączyć tę kluczową informację:

function fail ($message){ 
    die(json_encode(array('status'=>'fail', 'message'=>$message))); 
} 

function success ($message){ 
    die(json_encode(array('status'=>'success', 'message'=>$message))); 

ten wysyła komunikat z powrotem do funkcji AJAX w jQuery. Wygląda na to, że po przesłaniu formularza raz przy użyciu metody # 2 komunikaty o sukcesach/błędach są wygaszone.

Answer 1

Demo: http://jsfiddle.net/xavi3r/D3prt/

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

Original Odpowiedź: Resetting a multi-stage form with jQuery

---

Mike'a sugestia (z komentarzami) do wyboru i wybiera zachować nienaruszone!

Ostrzeżenie: Jeśli tworzysz elementy (więc nie są one w Domu), wymienić :hidden z [type=hidden] lub wszystkie pola będą ignorowane!

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

Answer 2

Możesz spróbować

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

Wejścia nie są selektory, więc nie trzeba : nie testowałem go z kodem. Tylko szybkie przypuszczenie!

Answer 3

ja polecam przy użyciu starego dobrego javascript:

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

Answer 4

zajęło trochę wyszukiwanie i czytanie znaleźć metodę, która nadaje moją sytuację, złożyć na formularzu, należy uruchomić ajax do zdalnego skryptu php, na sukces/porażka informują użytkownika, przy wypełnieniu formularza.

Posiadałem pewne wartości domyślne, wszystkie inne metody związane z .val (''), nie resetując, ale czyszcząc formularz.

mam to też działać poprzez dodanie przycisku reset do formularza, który miał identyfikator myform:

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

to dla mnie miało prawidłowy wynik na zresetowanie formę, no i nie zapomnij

event.preventDefault(); 

, aby zatrzymać wysyłanie formularza w przeglądarce, tak jak ja to zrobiłem :).

Pozdrowienia

Jacko

Answer 5

zorientowali się, co to było! Kiedy wyczyszczone pola przy użyciu metody each(), ale także otworzyło ukryte pole których php potrzebne do uruchomienia:

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

użyłem: nie() w sprawie wyboru, aby zatrzymać go od wyczyszczenie pola ukrytego .