Проблема предотвращения отправки формы с помощью jquery

Question

Я хочу выполнить отправку формы ajax на основе jquery при нажатии клавиши ввода. Очевидно, это включает в себя остановку нормального процесса отправки формы. Моя форма состоит из одного поля ввода. Вот код:

<script type="text/javascript">
$(document).ready(function() {
    // add vid ajax
    $.ajaxSetup({
        cache:false;
    });
    var ajax_load = '<div class="displayBox">Adding url...</div>';
    var loadUrl = 'ajax/add';

    $("#vidForm").submit(function(){
        e.preventDefault();
        alert("hello");
        /*$("body").html(ajax_load)
        .load(loadUrl,{url:$("#addurl").value},function(responseText){
            $("#videos").append(responseText);
        });*/
        return false;
    });

});
</javascript>
...
<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
</form>

Я бы ожидал, что вышесказанное будет отправлено в 'ajax / add', но это не так, вместо этого он отправит полноценный http-запрос к 'ajax' по умолчанию (по крайней мере, в Chrome).

Что я делаю не так?

Answer 1

Как правило, любые ошибки JavaScript, вероятно, приведут к тому же поведению, что и вообще без JavaScript , и это то, что вы видите ... стандартное поведение при отправке из-за ошибок скрипта. Я обрисовал в общих чертах проблемы ниже:

Ваш закрывающий тег отключен:

</javascript>

должно быть:

</script>

---

Также у литералов объекта не должно быть ; для свойств, поэтому измените:

$.ajaxSetup({
    cache:false;
});

Кому:

$.ajaxSetup({
    cache:false
});

---

И, наконец, удалите это:

e.preventDefault();

Ваш return false уже позаботился об этом (и в любом случае произойдет ошибка из-за отсутствующего параметра, как в ответе TJ).

Answer 2

Обновление : Теперь, когда вы устранили предыдущие проблемы, я не вижу никаких проблем.По сути, это работает: http://jsbin.com/ugowa4 (протестировано на Chrome, Firefox и Opera для Linux; IE6 и IE8.) Вам придется пройтись с отладчиком, чтобы выяснить, в какой момент происходит сбой.Основы должны работать.

---

Похоже, вы забыли объявить параметр события:

$("#vidForm").submit(function(e){
                              ^--- Add this

Без него вы пытаетесь получить доступ к переменной e изсодержащий объем.Если его нет или у него нет функции с именем preventDefault, в этот момент вы получите исключение, а остальная функция будет проигнорирована.

См. Также примечание Ника озакрывающий тег (должен быть </script>) и неуместный ;.

Answer 3

У вас есть какая-нибудь кнопка типа submit в form? Например, как

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <button type="submit">Send</button>
</form>

или

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <input type="submit" value="Send" />
</form>

При нажатии кнопки «Отправить» в примере будет отправлена ​​форма. Если в вашей форме больше элементов, пожалуйста, напишите весь код.