. отправить форму информации с JQuery и вернуть результат без перезагрузки - PullRequest
Новая
       10

. отправить форму информации с JQuery и вернуть результат без перезагрузки

0 голосов
/ 13 ноября 2010

Jquery: 

<script type="text/javascript">
$(document).ready(function(){
    $("form.register").change(function() {
        $.post("check.php", $("form.register").serialize(), function( data ) {
            if( data.username == "inuse" )
                $("p#username_error").slideDown();
            else
                $("p#username_error").hide();
            if( data.password == "missmatch" )
                $("p#password_error").slideDown();
            else
                $("p#password_error").hide();
            if( data.email == "notvalid" )
                $("p#email_error").slideDown();
            else
                $("p#email_error").hide();


        }, "json");
    });

    $("form.register").unbind('submit');
    $("form.register").submit(function(e) {
        e.preventDefault();

    //  $.post("register.php", $("form.register").serialize() function( data ) {

        $("p#submit_error").slideDown();

    //  alert("Data Loaded: " + data);
    //  alert("Data Loaded: " + data.submit);

    //  }, "json");

        return false;

        }); 

});
</script>

Код, который не работает, это часть $("form.register").submit(function(){...}.

Это мой HTML: 

<form action="register.php" method="post" class="register">
    <fieldset>
        <legend>registration</legend>
        <input type="text" name="username" value="" />
        <label>desired username</label>
        <p id="username_error" class="error">That Username is unavailable</p>
        <input type="password" name="password" value="" />
        <label>password</label>
        <input type="password" name="password_again" value="" />
        <label>password Again</label>
        <p id="password_error" class="error">Passwords do not match</p>
        <input type="text" name="email" value="" />
        <label>email</label>
        <p id="email_error" class="error">Email is not valid</p><br />
        <input type="submit" name="submit" value="register" />
        <p id="submit_error" class="error">test</p>
    </fieldset>
</form>

register.php: 

$data = array( "submit" => "test" );
echo json_encode( $data );

Я новичок в jquery, ajax и javascript. Но из моего понимания. Когда я нажимаю «отправить» в форме регистрации, я отправляю все значения в register.php, которые отвечают "test". Мой JQuery Javasript затем выполнить: 

if( data.submit == "test" )
    $("p#submit_error").slideDown();

которая должна была сдвинуть эту информацию 

<p id="submit_error" class="error">test</p>

Но когда я нажимаю "отправить", ничего не происходит.

Ответы [ 2 ]

1 голос
/ 13 ноября 2010

AJAX означает Асинхронный JavaScript и XML.Это означает, что $.post будет действительно возвращаться до получения ответа (функция обратного вызова позднее вызывается асинхронно, когда она есть).Поэтому форма отправляется немедленно.

Чтобы остановить это, вставьте return false; в конце обработчика события отправки, что остановит отправку формы.Когда ответ придет, решите, хотите ли вы отправить форму обычным способом.Этот код можно использовать для этого: 

// Unbind the submit event handler registered earlier
// so we do not make another AJAX request
$("form.register").unbind('submit');

// Actually submit the form
$("form.register").submit();

Конечно, если вам не нужно, вам не нужен последний код.

Примечание: Я бы порекомендовал отключить кнопку во время запроса AJAX.Это гарантирует, что когда пользователь излишне попытается «дважды щелкнуть» кнопку, это не окажет отрицательного воздействия.Один из способов сделать это - использовать метод jQuery .one , который также исключает необходимость использования unbind: 

function submitButtonClicked() {
    $.post(..., function( data ) {

        ...

        // Submit form if data is valid
        $("form.register").submit();

        // Re-enable button if form was not submitted
        $("form.register").one('submit', submitButtonClicked);

    }, "json");

    // Cancel form submission
    return false;
}

$("form.register").one('submit', submitButtonClicked);
0 голосов
/ 13 ноября 2010

Вы должны убедиться, что data.submit существует и значение равно "test". Попробуйте использовать alert / console.log.

РЕДАКТИРОВАТЬ: имел другой взгляд. Попробуйте изменить ваш код следующим образом: 

$("form.register").submit(function(e) {
        e.preventDefault();
        $.post("register.php", $("form.register").serialize(), function( data ) {
            if( data.submit == "test" )
                $("p#submit_error").slideDown();
        }, "json");
    });
...