jQuery: Eliminazione degli input di form

Question

ho cercato di modi diversi per cancellare una forma:

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

Questo funziona perfettamente.

jQuery # 2:

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

Questo cancella la forma ma non mi permette di presentare le eventuali ulteriori informazioni a esso. Provo a fare nuovamente clic sul pulsante e non fa nulla.

Ecco il gestore di pulsante clic: codice

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

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

}

Se uso il metodo jQuery # 2, ottengo questo errore nella console:

Uncaught TypeError: Cannot read property 'status' of null 

Perché succede?

Ho dimenticato di includere queste informazioni chiave:

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

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

Questo invia il messaggio di nuovo alla funzione AJAX in jQuery. Sembra che dopo aver inviato il modulo una volta utilizzando il metodo n. 2, i messaggi di successo/errore vengono cancellati.

Answer 1

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

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

risposta originale: Resetting a multi-stage form with jQuery

---

di Mike suggerimento (dai commenti) per mantenere casella di controllo e seleziona intatto!

Attenzione: Se si sta creando elementi (quindi non sono in dom), sostituire :hidden con [type=hidden] o tutti i campi verranno ignorati!

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

Answer 2

Si può provare

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

ingressi sono selettori, quindi non è necessario il : non ho provato con il codice. Solo una supposizione veloce!

Answer 3

avrei recomment usando il buon vecchio javascript:

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

Answer 4

Ha preso qualche ricerca e la lettura di trovare un metodo che adatta la mia situazione, il modulo di presentare, eseguire ajax ad uno script php a distanza, su successo/insuccesso informa l'utente, a completa cancellazione del modulo.

ho avuto alcuni valori di default, tutti gli altri metodi coinvolti .VAL ('') in tal modo non reset ma di compensazione la forma.

ho avuto anche questo lavoro con l'aggiunta di un pulsante di reset per la forma, che aveva un id di myform:

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

Questo per me ha avuto l'esito corretto sul ripristino del modulo, oh e non dimenticare il

event.preventDefault(); 

per interrompere il modulo di invio nel browser, come ho fatto :).

saluti

Jacko

Answer 5

ho capito cosa fosse! Quando ho cancellato i campi con il metodo each(), ma ha anche cancellato il campo nascosto che il php necessario per eseguire:

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

ho usato il: not() sulla selezione per impedirgli di cancellare il campo nascosto .