ป้องกันการเปลี่ยนเส้นทางแบบฟอร์มหรือรีเฟรชเมื่อส่ง?

ฉันค้นหาผ่านหน้าเว็บมากมาย แต่ไม่พบปัญหาของฉันฉันจึงต้องโพสต์

ฉันมีแบบฟอร์มที่มีปุ่มส่งและเมื่อส่งแล้วฉันต้องการไม่ให้รีเฟรชหรือเปลี่ยนเส้นทาง ฉันแค่ต้องการให้ jQuery ทำหน้าที่

นี่คือแบบฟอร์ม:

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

และนี่คือ jQuery:

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

ฉันได้ลองใช้และไม่มีองค์ประกอบการกระทำในแบบฟอร์ม แต่ไม่รู้ว่าฉันทำอะไรผิด สิ่งที่ทำให้ฉันรำคาญมากขึ้นคือฉันมีตัวอย่างที่ทำได้ดีเยี่ยม: ตัวอย่างหน้า

หากคุณต้องการดูปัญหาของฉันให้ไปที่ goto stormink.net (ไซต์ของฉัน) และตรวจสอบแถบด้านข้างที่ระบุว่า "ส่งอีเมลถึงฉัน" และ "การสมัครสมาชิก RSS" ทั้งสองแบบเป็นรูปแบบที่ฉันพยายามทำให้สิ่งนี้ใช้งานได้

เพียงจัดการการส่งแบบฟอร์มในเหตุการณ์submitและส่งคืนเท็จ:

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

คุณไม่ต้องการเหตุการณ์ onclick อีกต่อไปบนปุ่มส่ง:

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

ที่นี่:

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

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

แทนที่จะใช้เหตุการณ์ onClick คุณจะใช้ตัวจัดการเหตุการณ์ "คลิก" โดยใช้ jQuery กับปุ่มส่ง (หรือปุ่มอะไรก็ได้) ซึ่งจะใช้ submitClick เป็นการเรียกกลับ เราส่งผ่านเหตุการณ์ไปยัง callback เพื่อเรียกPreventDefaultซึ่งเป็นสิ่งที่จะป้องกันไม่ให้คลิกส่งแบบฟอร์ม

ในแท็กเปิดของแบบฟอร์มของคุณตั้งค่าแอตทริบิวต์การดำเนินการดังนี้:

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

ดูเหมือนว่าคุณจะไม่มีไฟล์return false.

หากคุณต้องการดูข้อผิดพลาดเริ่มต้นของเบราว์เซอร์ที่แสดงตัวอย่างเช่นข้อผิดพลาดที่เรียกใช้โดยแอตทริบิวต์ HTML (แสดงขึ้นก่อนการรักษา JS ของรหัสไคลเอ็นต์):

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

คุณควรใช้submitเหตุการณ์แทนclickเหตุการณ์ ในกรณีนี้ป๊อปอัปจะแสดงขึ้นโดยอัตโนมัติโดยขอให้ " กรุณากรอกข้อมูลในฟิลด์นี้ " แม้จะมี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

ในฐานะที่เป็นคนที่กล่าวถึงก่อนหน้านี้ , return falseจะหยุดการขยายพันธุ์ (เช่นถ้ามีขนย้ายวัสดุอื่น ๆ ที่ติดอยู่กับการส่งแบบฟอร์มที่พวกเขาจะไม่ได้รับการดำเนินการ) แต่ในกรณีนี้การดำเนินการเรียกโดยเบราว์เซอร์มักจะรันเป็นอันดับแรก แม้จะมีreturn falseตอนท้าย

ดังนั้นหากคุณต้องการกำจัดป๊อปอัปเริ่มต้นเหล่านี้ให้ใช้clickเหตุการณ์บนปุ่มส่ง:

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

อีกทางเลือกหนึ่งคือไม่ใช้แท็กฟอร์มและจัดการเหตุการณ์คลิกบนปุ่มส่งผ่าน jquery วิธีนี้จะไม่มีการรีเฟรชหน้าใด ๆ แต่ในขณะเดียวกันก็มีข้อเสียที่ปุ่ม "Enter" สำหรับการส่งจะไม่ทำงานและในโทรศัพท์มือถือคุณจะไม่ได้รับปุ่มไป (สไตล์ในโทรศัพท์มือถือบางรุ่น) ดังนั้นให้ใช้แท็กฟอร์มและใช้คำตอบที่ยอมรับ