Cegah pengalihan formulir ATAU segarkan saat mengirimkan?

Saya telah mencari melalui banyak halaman, tetapi tidak dapat menemukan masalah saya, jadi saya harus membuat posting.

Saya memiliki formulir yang memiliki tombol kirim, dan ketika dikirim, saya ingin TIDAK menyegarkan ATAU mengalihkan. Saya hanya ingin jQuery melakukan suatu fungsi.

Berikut formulirnya:

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

Dan inilah jQuery:

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

Saya sudah mencoba dengan dan tanpa elemen tindakan di formulir, tapi tidak tahu apa yang saya lakukan salah. Yang lebih mengganggu saya adalah saya memiliki contoh yang melakukannya dengan sempurna: Halaman Contoh

Jika Anda ingin melihat masalah saya secara langsung, kunjungi stormink.net (situs saya) dan periksa bilah sisi yang bertuliskan "Kirim saya dan email" dan "Berlangganan RSS". Keduanya adalah formulir yang saya coba agar ini berfungsi.

Cukup tangani pengiriman formulir pada acara kirim , dan kembalikan salah:

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

Anda tidak memerlukan lagi acara onclick di tombol kirim:

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

Sini:

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

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

Alih-alih menggunakan event onClick, Anda akan menggunakan bind sebuah event handler 'click' menggunakan jQuery ke tombol submit (atau tombol apa saja), yang akan mengambil submitClick sebagai callback. Kami meneruskan acara ke callback untuk memanggil preventDefault , yang akan mencegah klik mengirimkan formulir.

Di tag pembuka formulir Anda, setel atribut tindakan seperti ini:

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

Sepertinya Anda melewatkan file return false.

Jika Anda ingin melihat kesalahan browser default ditampilkan , misalnya, yang dipicu oleh atribut HTML (muncul sebelum perlakuan JS kode klien):

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

Anda harus menggunakan submitacara tersebut, bukan clickacara tersebut. Dalam hal ini popup akan secara otomatis ditampilkan meminta " Harap isi bidang ini ". Bahkan dengan 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

Seperti yang disebutkan sebelumnya , return falseakan menghentikan penyebaran (yaitu jika ada lebih banyak penangan yang dilampirkan ke pengiriman formulir, mereka tidak akan dieksekusi), tetapi, dalam kasus ini, tindakan yang dipicu oleh browser akan selalu dijalankan terlebih dahulu. Bahkan dengan a return falsedi akhir.

Jadi, jika Anda ingin menyingkirkan pop-up default ini , gunakan clickacara di tombol kirim:

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

Solusi alternatifnya adalah dengan tidak menggunakan tag form dan menangani event klik pada tombol submit melalui jquery. Dengan cara ini tidak akan ada penyegaran halaman tetapi pada saat yang sama ada sisi negatifnya yaitu tombol "enter" untuk pengiriman tidak akan berfungsi dan juga di ponsel Anda tidak akan mendapatkan tombol buka (gaya di beberapa ponsel). Jadi tetap gunakan tag formulir dan gunakan jawaban yang diterima.