jQuery: Forma entradas de compensación

Question

me han tratado de diferentes maneras de borrar un formulario:

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

Esto funciona perfectamente.

jQuery # 2:

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

Esto borra la forma, pero no me deja remitan cualquier tipo de información más a ella. Intento y hago clic en el botón otra vez y no hace nada.

Aquí está el controlador de botones de clic: código

$("#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 publicación:

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

}

Si utilizo el método jQuery # 2, me sale este error en la consola:

Uncaught TypeError: Cannot read property 'status' of null 

¿Por qué sucede esto?

me olvidó incluir esta información clave:

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

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

Esto envía el mensaje de nuevo a la función de AJAX en jQuery. Parece que después de enviar el formulario una vez que se utiliza el método n. ° 2, los mensajes de éxito/error se borran.

Answer 1

Demostración: http://jsfiddle.net/xavi3r/D3prt/

respuesta original

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

: Resetting a multi-stage form with jQuery

---

sugerencia de Mike (a partir de los comentarios) para mantener casilla y selecciona intacto!

Advertencia: Si va a crear elementos (por lo que no están en el dom), reemplace :hidden con [type=hidden] o se ignorarán todos los campos!

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

Answer 2

Puede intentar

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

Entradas hay selectores, por lo que no es necesario el : no lo he probado con su código. ¡Solo una adivinación rápida!

Answer 3

yo recomiendo el uso de JavaScript buena antigua:

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

Answer 4

Tomó un poco de búsqueda y lectura de encontrar un método que se adaptaba a mi situación, en la forma de presentar, ejecutar ajax a un script PHP remoto, en éxito/fracaso informar al usuario, en completo borre la forma.

Tenía algunos valores predeterminados, todos los otros métodos implicados .val ('') por lo tanto no restablecer pero borrar el formulario.

tengo esto también trabajar mediante la adición de un botón de reinicio de la forma, que tenía un diámetro interior de myform:

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

Esto para mí tenido el resultado correcto sobre cómo restablecer el formulario, ah y no se olvide la

event.preventDefault(); 

para detener el envío del formulario en el navegador, como lo hice :).

Saludos

Jacko

Answer 5

me di cuenta de lo que era! Cuando Despejé los campos usando el método each(), también se aclaró el campo oculto que el php necesario para ejecutar:

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

He utilizado el: No() en la selección para que deje de despejar el campo oculto .