Form yönlendirmesini önlensin mi VEYA gönderildiğinde yenilensin mi?

Bir sürü sayfada arama yaptım, ancak sorunumu bulamıyorum, bu yüzden bir gönderi yapmak zorunda kaldım.

Gönder düğmesi olan bir formum var ve gönderildiğinde yenilemesini VEYA yeniden yönlendirmesini istiyorum. Sadece jQuery'nin bir işlevi gerçekleştirmesini istiyorum.

İşte form:

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

Ve işte jQuery:

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

Formda bir eylem öğesi olup olmadığını denedim, ancak neyi yanlış yaptığımı bilmiyorum. Beni daha çok rahatsız eden şey, bunu mükemmel bir şekilde yapan bir örneğim olması: Örnek Sayfa

Sorunumu canlı görmek istiyorsanız, stormink.net'e (sitem) gidin ve "Bana ve e-posta gönder" ve "RSS Aboneliği" yazan kenar çubuğuna bakın. Her ikisi de bunun üzerinde çalışmaya çalıştığım formlar.

Sadece submit olayında form gönderimini halledin ve false değerini verin:

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

Gönder düğmesinde artık onclick olayına ihtiyacınız yok:

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

Buraya:

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

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

OnClick olayını kullanmak yerine, jQuery'yi kullanarak bir 'tıklama' olay işleyicisini, submitClick'i bir geri arama olarak alacak olan gönder düğmesine (veya herhangi bir düğmeye) bağlayacaksınız. Olayı , engellemenin formu göndermesini engelleyecek olan önlemDefault'u çağırmak için geri aramaya iletiriz .

Formunuzun açılış etiketinde aşağıdaki gibi bir eylem özelliği ayarlayın:

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

Görünüşe göre a return false.

HTML öznitelikleri tarafından tetiklenenler gibi varsayılan tarayıcı hatalarının görüntülenmesini istiyorsanız (herhangi bir istemci kodu JS işleminden önce gösterilir):

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

Sen kullanmalıdır submityerine olayı clickolay. Bu durumda, otomatik olarak " Lütfen bu alanı doldurun " yazan bir açılır pencere görüntülenecektir . Şununla bile 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

Daha önce de belirtildiği gibi , return falseyayılmayı durdurur (yani, form gönderimine eklenen daha fazla işleyici varsa, bunlar yürütülmez), ancak bu durumda, tarayıcı tarafından tetiklenen eylem her zaman ilk olarak yürütülür. return falseSonunda bir ile bile .

Dolayısıyla , bu varsayılan açılır pencerelerden kurtulmak istiyorsanızclick , gönder düğmesindeki etkinliği kullanın :

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

Alternatif bir çözüm, form etiketi kullanmamak ve jquery aracılığıyla gönder düğmesindeki tıklama olayını işlemektir. Bu şekilde herhangi bir sayfa yenilemesi olmayacaktır, ancak aynı zamanda gönderme için "gir" düğmesinin işe yaramayacağı bir dezavantajı vardır ve ayrıca cep telefonlarında bir git düğmesi (bazı cep telefonlarında bir stil) almayacaksınız. Bu yüzden form etiketini kullanmaya devam edin ve kabul edilen cevabı kullanın.