Problema que impede o envio de formulários com jquery - javascript, ajax, forms, jquery

Desejo executar um formulário ajax baseado em jquerysubmissão ao pressionar a tecla Enter. Obviamente, isso envolve interromper o processo normal de envio de formulários. Meu formulário consiste em um único campo de entrada. Aqui está o código:

<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>

Eu esperava que o item acima fosse enviado para "ajax / add", mas isso não ocorreu, enviando uma solicitação http completa para "ajax" o comportamento padrão (pelo menos no Chrome).

O que estou fazendo de errado?

Respostas:

2 para resposta № 1

Atualizar: Agora que você resolveu os problemas anteriores, não estou vendo nenhum problema. Fundamentalmente, ele funciona: http://jsbin.com/ugowa4 (Testado no Chrome, Firefox e Opera para Linux; IE6 e IE8.) Você precisará seguir com um depurador para descobrir em que ponto as coisas estão falhando. O básico deve funcionar.

---

Parece que você esqueceu de declarar o parâmetro do evento:

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

Sem ele, você está tentando acessar uma variável e do escopo que contém. Se não houver um, ou ele não tiver uma função chamada preventDefault, você receberá uma exceção nesse ponto e o restante da função será ignorado.

Veja também a nota de Nick sobre a tag de fechamento (deve ser </script>) e os extraviados ;.

---

4 para resposta № 2

Como regra geral, qualquer erro de JavaScript provavelmente resultará no mesmo comportamento que nenhum JavaScripte é isso que você está vendo ... o padrão comportamento de envio devido a erros de script. Eu descrevi os problemas abaixo:

Sua tag de fechamento está desativada:

</javascript>

deveria estar:

</script>

---

Os literais de objetos também não devem ter um ; para propriedades, altere:

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

Para:

$.ajaxSetup({
cache:false
});

---

E por último, remova isto:

e.preventDefault();

Seu return false já está cuidando disso (e, de qualquer maneira, teria erro por causa do parâmetro ausente, como na resposta de TJ).

---

0 para resposta № 3

Você tem algum botão com o tipo submit no form? Por exemplo, como

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

ou

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

Clicar no botão "Enviar" no exemplo enviará o formulário. Se você formar mais elementos, por favor, poste o código inteiro.

---