Триггер успеха или неудачи jQuery .submit()

#javascript #jquery #ruby-on-rails

Вопрос:

Я использую .submit() для периодической отправки моей формы через ajax, но я хочу, чтобы пользователь видел, что форма сохраняется с помощью вращающегося колеса, а затем «Сохраняется!» в случае успеха. Есть ли success триггер для .submit() в jQuery?

Спасибо!

Ответ №1:

Попробуйте это:

jQuery:

 $(document).ready(function() {
    $('#form').submit(function() {
        var status = '<img class="loading" src="loading_detail.gif" alt="Loading..." />';
        $("#ajax").after(status);
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(json) {
                if(json.type == 'success') {
                    $('#msg').css("color","green").html(json.message);
                } else if(json.type == 'warning'){
                    $('#msg').css("color","yellow").html(json.message);
                } else if(json.type == 'error'){
                    $('#msg').css("color","red").html(json.message);
                }
                $('.loading').remove();
            }
        })
        return false;
    });
});

HTML:

 <div id="msg"></div>
<form id="form" method="post" action="action.php" >
    <input type="text" name="email" />
    <input type="submit" name="submit" value="submit" /><span id="ajax"></span>
</form>

action.php :

 <?php
if(isset($_POST['email'])){
$val = $_POST['email'];
switch ($val) {
    case 'email@site.com':
        $return = array('type'=>'success', 'message'=>'This is success message!'); break;
    case 'email':
        $return = array('type'=>'warning', 'message'=>'This is warning message!'); break;
    default:
        $return = array('type'=>'error', 'message'=>'This is error message!');
}
echo json_encode($return);
}
?>

Примечание:
Если вы отправляете форму программно, вам нужно вызвать $('#form').submit() еще раз, но на этот раз без аргументов, чтобы запустить событие отправки.

Ответ №2:

Вы можете использовать $.post() запрос вручную вместо .submit() . $.post() Обратный вызов выполнен успешно.

Вам нужно будет заполнить детали $.post() (целевой URL) и .serialize() элементов вашей формы.

Ответ №3:

Чтобы показать вращающееся колесо при отправке страницы, попробуйте получить анимированный GIF (есть много бесплатных кругов загрузки). Этот GIF-файл реализован на вашей странице с:

 class="myloadingcircle" style="display:none"

а затем используйте jQuery:

 $("form").submit(function(e) { $(".myloadingcircle").show(); });