Проблема с отправкой формы с помощью 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> 

Я бы ожидать, что выше представить «Аякса/добавить», но это не делает, а не подав полномасштабную HTTP-запрос на «АЯКС» поведение по умолчанию (в Chrome как минимум).

Что я делаю неправильно?

Answer 1

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

---

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

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

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

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

Answer 2

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

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

</javascript> 

должно быть:

</script> 

---

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

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

To:

$.ajaxSetup({ 
    cache:false 
}); 

---

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

e.preventDefault(); 

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

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> 

Нажатие на кнопку «Отправить» в примере будет представлять форму. Если вы создаете больше элементов, разместите весь код.