jQuery: очистка входных данных формы

Я пробовал разные способы, чтобы очистить форму:



<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 Post code:



<?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('/[^ws]/i', $fname) || preg_match('/[^ws]/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)));


это отправляет сообщение обратно в функцию AJAX в jQuery. Похоже, что после того, как я отправлю форму один раз с помощью метода #2, сообщения об успехе/неудаче будут отключены.

1025   5  

5 ответов:

демо : http://jsfiddle.net/xavi3r/D3prt/

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

Оригинальный Ответ: сброс многоступенчатой формы с помощью jQuery

предложение Майка (из комментариев), чтобы сохранить флажок и выбирает неповрежденным!

предупреждение: если вы создаете элементы (так что они не в dom), замените :hidden С [type=hidden] или все поля будут проигнорированы!

$(':input','#myform')
  .removeAttr('checked')
  .removeAttr('selected')
  .not(':button, :submit, :reset, :hidden, :radio, :checkbox')
  .val('');
147  
2017-05-23 15:02:37

Я бы рекомендовал использовать старый добрый javascript:

document.getElementById("addRunner").reset();
19  
2013-06-06 19:00:32

потребовалось некоторое время поиска и чтения, чтобы найти метод, который подходит моей ситуации, при отправке формы, запустите ajax на удаленный PHP-скрипт, при успешном/неудачном информировании пользователя, при полной очистке формы.

у меня были некоторые значения по умолчанию, все другие методы.val (") тем самым не сбрасывает, а очищает форму.

я получил эту работу, добавив кнопку сброса в форму, которая имела идентификатор myform:

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

Это для меня был правильный результат на сброс форма, Ох и не забудь 

event.preventDefault();

чтобы остановить отправку формы в браузере, как я сделал :).

в отношении

Яцко

4  
2013-07-17 00:28:24

можно попробовать

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

входы не являются селекторами, поэтому вам не нужно : Не проверял его с вашим кодом. Просто быстрая догадка!

2  
2014-01-27 16:13:54

Я понял, что это было! Когда я очистил поля с помощью метода each (), он также очистил скрытое поле, которое php должен был запустить:

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

я использовал :not () на выбор, чтобы остановить его от очистки скрытого поля.

0  
2014-12-27 17:23:51

Comments

    Ничего не найдено.
Click here to cancel reply.