Problema nella prevenzione dell'invio di moduli con jquery - javascript, ajax, forms, jquery

Desidero eseguire un modulo ajax basato su jqueryinvio premendo il tasto Invio. Ovviamente ciò comporta l'arresto del normale processo di invio del modulo. Il mio modulo è costituito da un singolo campo di input. Ecco il codice:

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

Mi aspettavo che quanto sopra fosse inviato ad "ajax / add" ma non lo fa, inviando invece una richiesta http in piena regola ad "ajax" come comportamento predefinito (almeno in Chrome).

Che cosa sto facendo di sbagliato?

risposte:

2 per risposta № 1

Aggiornare: Ora che hai risolto i problemi precedenti, non vedo alcun problema. Fondamentalmente, funziona: http://jsbin.com/ugowa4 (Testato su Chrome, Firefox e Opera per Linux; IE6 e IE8.) Dovrai eseguire un debugger per capire a che punto le cose stanno fallendo. Le basi dovrebbero funzionare.

---

Sembra che tu abbia dimenticato di dichiarare il parametro dell'evento:

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

Senza di essa, stai tentando di accedere a una variabile e dall'ambito di contenimento. Se non ce n'è uno, o non ha una funzione chiamata preventDefault, a quel punto otterrai un'eccezione e il resto della funzione verrà ignorato.

Vedi anche la nota di Nick sul tag di chiusura (dovrebbe essere </script>) e il posto fuori luogo ;.

---

4 per risposta № 2

Come regola generale, qualsiasi errore JavaScript risulterà probabilmente nello stesso comportamento di niente JavaScript, e questo è quello che stai vedendo ... il predefinito comportamento di invio a causa di errori di script. Ho delineato i problemi di seguito:

Il tuo tag di chiusura è disattivato:

</javascript>

dovrebbe essere:

</script>

---

Anche i letterali oggetto non dovrebbero avere un'estensione ; per le proprietà, quindi cambia:

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

A:

$.ajaxSetup({
cache:false
});

---

Infine, rimuovi questo:

e.preventDefault();

Il tuo return false si sta già occupando di questo (e sarebbe comunque un errore a causa del parametro mancante, come nella risposta di TJ).

---

0 per risposta № 3

Hai qualche pulsante con il tipo submit nel form? Ad esempio like

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

o

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

Facendo clic sul pulsante "Invia" nell'esempio verrà inviato il modulo. Se il tuo modulo ha più elementi, inserisci l'intero codice.

---