He tratado de diferentes formas para 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('');
}

Este funciona a la perfección.

jQuery #2:

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

Esto borra el formulario pero no me deja enviar más información. Yo intente y haga clic en el botón de nuevo y no hace nada.

Aquí está el botón haga clic en controlador:

$("#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 código postal:

<?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 puedo usar jQuery método #2, me sale este error en la consola:

Uncaught TypeError: Cannot read property 'status' of null

¿Por qué sucede esto?

Se 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 vuelta a la función AJAX de jQuery. Parece que después de presentar el formulario una vez utilizando el método #2 el éxito/falla mensajes están en blanco.

  • Algunas HTML iba a ayudar, mientras que PHP es innecesario en este contexto.
  • Mostrar tu formulario HTML por favor.
  • También, el código podría ser vulnerable a Inyección de SQL. Yo mejor no presentar Robert'; DROP TABLE runners; -- como mi primer nombre …
  • Nope que no funciona, así que supongo que soy fuerte 🙂 Este se ocupa de algunos conceptos básicos de la inyección de SQL: $fname = htmlspecialchars($_POST[‘txtFirstName’]);
  • Esto también: if(preg_match(‘/[^\w\s]/i’, $fname) || preg_match(‘/[^\w\s]/i’, $lname)) { error (no Válido » nombre.’);
  • Huy, se perdió esa parte. No importa 😉
  • Me di cuenta de lo que era! Cuando me abrió los campos, usando el cada() método, también se borra el campo oculto que el php necesario para la ejecución: if ($_POST[‘action’] == ‘addRunner’). He utilizado el :no() en la selección para que deje de despejar el campo oculto.

5 Comentarios

  1. 149

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

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

    Original Respuesta: El restablecimiento de un multi-etapa formulario con jQuery


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

    Advertencia: Si estás en la creación de elementos (por lo que no está en el dom), reemplazar :hidden con [type=hidden] o todos los campos serán ignorados!

    $(':input','#myform')
      .removeAttr('checked')
      .removeAttr('selected')
      .not(':button, :submit, :reset, :hidden, :radio, :checkbox')
      .val('');
    • Me gustaría sugerir a eliminar el «checked» y «seleccionado» atributos de la derecha después de seleccionar la entrada, entonces el filtro de salida :botón :enviar, :reset, oculto, :radio y :casilla de verificación para establecer el resto de entradas’ el valor de la «». De lo contrario, usted se encontrará con casillas de verificación y radios que no tienen ningún valor después de la limpieza. Así que va como esto: $(‘:input’, ‘#myform’) .removeAttr(‘checked’) .removeAttr(‘selected’) .no(‘:botón :enviar, :reset, oculto, :radio :casilla de verificación») .val(«);
    • Usted debería, de hecho, el uso de la «reset()» método de nativos de javascript. @ver jwaern respuesta. Si no eres bueno con javascript, usted todavía puede $(‘lo que sea-el-selector-es»).get(0).reset(). Limpio, no quitar valores de botón de radio y casillas de verificación, toma sólo una línea de javascript, probablemente más rápido que la solución.
    • Esta es la mejor solución, gracias!
  2. 19

    Me gustaría recomendar el uso de la buena vieja javascript:

    document.getElementById("addRunner").reset();
    • Usted no necesita la # para getElementById(), sólo se usa para selector de cadenas en cosas como jQuery $(...) o los nativos JS equivalente querySelectorAll(...).
  3. 4

    Tomó un poco de búsqueda y lectura de encontrar un método que se adapte a mi situación, en la forma de presentar, ejecutar ajax remota a un script php, sobre el éxito/fracaso de informar al usuario, en completa claridad la forma.

    Tuve algunos valores por defecto, todos los otros métodos implicados .val(«) así que no reajusta pero claro el formulario.

    Tengo esto demasiado trabajo mediante la adición de un botón de reset a la forma, la cual tenía un id de myform:

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

    Esto para mí tuvo el resultado correcto en el restablecimiento de la forma, ah, y no olvides los

    event.preventDefault();

    para detener el formulario de presentación en el navegador, como yo lo hice :).

    Que respecta a

    Jacko

  4. 2

    Usted puede tratar de

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

    Entradas no son selectores, así que usted no necesita la :
    No lo he probado con el código. Sólo un rápido adivinar!

  5. 0

    Me di cuenta de lo que era! Cuando me abrió los campos, usando el cada() método, también se borra el campo oculto que el php necesario para la ejecución:

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

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

Dejar respuesta

Please enter your comment!
Please enter your name here