Zablokować przekierowanie formularza LUB odświeżyć po przesłaniu?

Przeszukałem kilka stron, ale nie mogę znaleźć swojego problemu, więc musiałem napisać post.

Mam formularz, który ma przycisk przesyłania i chcę, aby po przesłaniu NIE odświeżał ani nie przekierowywał. Chcę tylko, aby jQuery wykonywał jakąś funkcję.

Oto formularz:

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

A oto jQuery:

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

Próbowałem z elementem akcji w formularzu i bez niego, ale nie wiem, co robię źle. Bardziej denerwowało mnie to, że mam przykład, który robi to doskonale: Przykładowa strona

Jeśli chcesz zobaczyć mój problem na żywo, wejdź na stormink.net (moją stronę) i sprawdź pasek boczny z napisami „Wyślij mi i wyślij e-mail” oraz „Subskrypcja RSS”. Oba są formami, nad którymi staram się pracować.

Po prostu obsłuż przesłanie formularza na zdarzenie przesyłania i zwróć false:

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

Nie potrzebujesz już zdarzenia onclick na przycisku przesyłania:

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

Tutaj:

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

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

Zamiast używać zdarzenia onClick, użyjesz powiązania procedury obsługi zdarzenia „click” za pomocą jQuery do przycisku przesyłania (lub dowolnego przycisku), który przyjmie submitClick jako wywołanie zwrotne. Zdarzenie przekazujemy do wywołania zwrotnego w celu wywołania PreventDefault , co zapobiegnie przesłaniu formularza przez kliknięcie.

W otwierającym tagu formularza ustaw atrybut akcji w następujący sposób:

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

Wygląda na to, że brakuje ci return false.

Jeśli chcesz zobaczyć domyślne błędy przeglądarki, które są wyświetlane , na przykład te wywołane przez atrybuty HTML (wyświetlane przed jakimkolwiek przetwarzaniem kodu klienta przez JS):

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

Zamiast submitzdarzenia należy użyć clickzdarzenia. W takim przypadku automatycznie wyświetli się wyskakujące okienko z prośbą o wypełnienie tego pola . Nawet z 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

Jak ktoś wcześniej wspomniał , return falsezatrzymałby propagację (tj. Jeśli do przesłania formularza jest dołączonych więcej programów obsługi, nie zostaną one wykonane), ale w tym przypadku akcja wyzwalana przez przeglądarkę zawsze zostanie wykonana jako pierwsza. Nawet return falsena końcu.

Więc jeśli chcesz pozbyć się tych domyślnych pop-upy , użyj clickzdarzenia na przycisk Wyślij:

$('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

Alternatywnym rozwiązaniem byłoby nie używanie tagu formularza i obsługa zdarzenia kliknięcia przycisku przesyłania za pomocą jquery. W ten sposób nie będzie odświeżania strony, ale jednocześnie ma wadę polegającą na tym, że przycisk „enter” do przesyłania nie działa, a także na telefonach komórkowych nie otrzymasz przycisku start (styl w niektórych telefonach). Więc trzymaj się tagu formularza i używaj zaakceptowanej odpowiedzi.