Есть ли способ предотвратить отправку формы с помощью этого javascript/jquery?

Я искал в сети, я пытался реализовать утверждения «preventdefaults» и «return false» повсюду, но я не могу найти способ предотвратить отправку этой формы и перезагрузку страницы. Он перезагружается только после проверки формы. Я новичок, но я очень старался создать скрипт для проверки формы (которая имеет метод «post» и «#» в качестве действия) и сделать ajax-вызов. Это школьное задание, и оно будет изящным для любых указаний, которые вы, ребята, могли бы дать.

$(document).ready(function()
{
    $("#submit").click(function()
        {
            var gbname = $("#gbname")[0];
            var gbmessage = $("#gbmessage")[0];

            formFields = [gbname, gbmessage]
            var warning = false;

            for (i=0; i<formFields.length; i++)
            {
                formFields[i].style.backgroundColor = "white";
                if (formFields[i].value == "")
                {
                    formFields[i].style.backgroundColor = "red"
                    $(formFields[i]).bind("keyup", resetBgColor);
                    $(formFields[i]).bind("change", resetBgColor);
                    warning = true;
                }       
            }

            if (warning == true)
            {
                alert("Vänligen fyll i fälten korrekt!");
                return false;
            }

            else
            {
                $.post('ajax.php', {gbname: gbname, gbmessage: gbmessage},

                function(data)
                {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" +gbname+ "</p> <p class='messages'><b>Meddelande:</b>" +gbmessage+ "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                });

                return false;
            }

            return false;

        });

});

javascript jquery return preventdefault
person Michael Scott    schedule 29.04.2013    source источник
comment
Убедитесь, что ваша кнопка является обычной кнопкой, а не кнопкой отправки :)   -  person antlersoft    schedule 29.04.2013
comment
вместо click попробуйте использовать $('form').submit(function(){return false;})   -  person Mohammad Adil    schedule 29.04.2013
comment
Каждый раз, когда вы нажимаете эту кнопку, вы связываете элементы формы с событиями. Это плохая идея.   -  person epascarello    schedule 29.04.2013
comment
Если вы проверите свою консоль js, заметите ли вы какие-либо ошибки до перезагрузки страницы? Если бы мне пришлось пойти на риск, я бы заподозрил, что вы получаете ошибку в своем коде здесь, и ложные возвраты не попадают, потому что код не может завершить выполнение, а затем форма продолжается с его поведение по умолчанию, которое заключается в публикации.   -  person lewsid    schedule 29.04.2013
comment
И ответ - один из ваших тегов. Также известный как предотвращение по умолчанию. И возврат false, вероятно, не работает из-за ошибки JS. Настройте консоль так, чтобы она сохраняла консоль при навигации по страницам.   -  person epascarello    schedule 29.04.2013
comment
Вы можете попробовать начать с одного утверждения «возвратить ложь», а затем постепенно добавлять сюда свою логику, чтобы понять, в чем может быть проблема.   -  person lewsid    schedule 29.04.2013
comment
Я изменил кнопку отправки на обычную кнопку. Теперь часть проверки работает, но я не могу выполнить вызов ajax, основная цель .... но, согласно моей консоли, у меня возникает ошибка неперехваченного типа: незаконный вызов jquery.min.js, последняя строка. Но я не умею отлаживать, правда. Я попытался изменить кнопку отправки и функцию отправки, но потом все перестает работать, моя консоль сообщила мне, что сначала приостановлена ​​​​исключение DOM, а также выдает новую ошибку ... Я понятия не имею, я пытался быть логичным об этом и начать только с одного return false, но я думаю, что есть гораздо более фундаментальная ошибка   -  person Michael Scott    schedule 29.04.2013
comment
и tnx за быстрые и хорошие ответы, мне действительно нужно разобраться, поэтому я возьму ваши слова и попытаюсь превратить их в волшебство.   -  person Michael Scott    schedule 29.04.2013

Ответы (2)


arrow_upward
0
arrow_downward

Ваши ссылки на элементы ввода как на объекты и данные, возвращаемые вашим вызовом AJAX, были немного запутанными.

Также включено предложение привязки к событию отправки формы. ДЕМО

$(document).ready(function () {

   function clearForm(){
        $('input.reset').each(function(){
            $(this).val('');
        });
    }

    $("form").on('submit', function () {
        alert('submitted!');
        var gbname = $("#gbname");
        var gbmessage = $("#gbmessage");

        formFields = [gbname[0], gbmessage[0]]
        var warning = false;

        for (i = 0; i < formFields.length; i++) {
            formFields[i].style.backgroundColor = "white";
            if (formFields[i].value == "") {
                formFields[i].style.backgroundColor = "red"
                $(formFields[i]).bind("keyup", resetBgColor);
                $(formFields[i]).bind("change", resetBgColor);
                warning = true;
            }
        }

        if (warning == true) {
            alert("Vänligen fyll i fälten korrekt!");
            return false;
        } else {
            var J = JSON.stringify({
                        "gbname": gbname.val(),
                        "gbmessage": gbmessage.val()
                    });
            console.log(J);
            $.ajax({
                type: "POST",
                url: '/echo/json/',
                datatype: 'json',
                data: {
                    json: J,
                    delay: 3
                },
                success: function (data) {
                    $("#successmessage").html(data);
                    $("#successmessage").hide();
                    $("#successmessage").fadeIn(1500); //Fade in error/success-meddelande

                    var comment = $("<div class='film2'><p class='names'><b>Namn:</b>" + data.gbname + "</p> <p class='messages'><b>Meddelande:</b>" + data.gbmessage + "</p></div>");

                    $("#kommentarer").prepend(comment);
                    clearForm();


                }  // end success
            }); // end ajax

            return false;
        }  // end else

        return false;

    });

});
person gillyspy    schedule 29.04.2013

arrow_upward
0
arrow_downward

я предлагаю использовать

$("form").on('submit', function (e) {
[...]
if(validationErrors) {
    alert(Errormessage);
    e.preventDefault();
}
[...]

вместо возврата false. https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault

Чтобы заставить его работать, вы должны использовать событие в качестве параметра вашей функции обратного вызова.

person Thomas Junk    schedule 29.04.2013
comment
Это в сочетании с вышеприведенным сообщением сделало трюк, я думаю... спасибо - person Michael Scott; 29.04.2013