Impedire il reindirizzamento del modulo O aggiornare all'invio?

Ho cercato in un sacco di pagine, ma non riesco a trovare il mio problema, quindi ho dovuto creare un post.

Ho un modulo che ha un pulsante di invio e, una volta inviato, desidero che NON si aggiorni O reindirizzi. Voglio solo che jQuery esegua una funzione.

Ecco il modulo:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

Ed ecco jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

Ho provato con e senza un elemento di azione nel modulo, ma non so cosa sto sbagliando. Quello che mi ha infastidito di più è che ho un esempio che lo fa perfettamente: Pagina di esempio

Se vuoi vedere il mio problema dal vivo, vai su stormink.net (il mio sito) e controlla la barra laterale dove dice "Inviami e email" e "Iscrizione RSS". Entrambe sono forme su cui sto cercando di farlo funzionare.

Gestisci semplicemente l'invio del modulo nell'evento di invio e restituisci false:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

Non hai più bisogno dell'evento onclick sul pulsante di invio:

<input class="submit" type="submit" value="Send" />

Qui:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

Invece di utilizzare l'evento onClick, utilizzerai l'associazione di un gestore di eventi "clic" utilizzando jQuery al pulsante di invio (o qualsiasi altro pulsante), che utilizzerà submitClick come callback. Passiamo l'evento al callback per chiamare preventDefault , che è ciò che impedirà al clic di inviare il modulo.

Nel tag di apertura del modulo, imposta un attributo di azione in questo modo:

<form id="contactForm" action="#">

Sembra che ti manchi un file return false.

Se desideri visualizzare gli errori del browser predefinito , ad esempio quelli attivati ​​dagli attributi HTML (visualizzati prima di qualsiasi trattamento JS del codice client):

<input name="o" required="required" aria-required="true" type="text">

Dovresti usare l' submitevento invece clickdell'evento. In questo caso verrà automaticamente visualizzato un popup che richiede " Compila questo campo ". Anche con preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Come qualcuno ha menzionato in precedenza , return falseinterromperà la propagazione (cioè se ci sono più gestori allegati all'invio del modulo, non verrebbero eseguiti), ma, in questo caso, l'azione attivata dal browser verrà sempre eseguita per prima. Anche con un return falsealla fine.

Quindi, se vuoi sbarazzarti di questi pop-up predefiniti , usa l' clickevento sul pulsante di invio:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Una soluzione alternativa sarebbe quella di non utilizzare il tag del modulo e gestire l'evento di clic sul pulsante di invio tramite jquery. In questo modo non ci sarà alcun aggiornamento della pagina ma allo stesso tempo c'è uno svantaggio che il pulsante "invio" per l'invio non funzionerà e anche sui cellulari non avrai un pulsante vai (uno stile in alcuni cellulari). Quindi attenersi all'uso del tag del modulo e utilizzare la risposta accettata.