ป้องกันการรีเฟรชหน้าเมื่อปุ่มภายในฟอร์มคลิก

ฉันประสบปัญหาขณะใช้งานปุ่มต่าง ๆ ภายในแบบฟอร์ม ฉันต้องการปุ่มนั้นเพื่อเรียกใช้ฟังก์ชัน มันทำ แต่ด้วยผลลัพธ์ที่ไม่พึงประสงค์ที่จะรีเฟรชหน้า

รหัสง่าย ๆ ของฉันจะเป็นแบบนี้

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

เมื่อคลิกปุ่มฟังก์ชั่นจะได้รับการเรียกด้วยการรีเฟรชหน้าซึ่งรีเซ็ตคำขอก่อนหน้าของฉันทั้งหมดซึ่งมีผลต่อหน้าปัจจุบันซึ่งเป็นผลมาจากการร้องขอก่อนหน้า

ฉันควรทำอย่างไรเพื่อป้องกันการรีเฟรชหน้า?

ให้getData()กลับเท็จ สิ่งนี้จะแก้ไข

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

เพิ่มtype="button"ไปที่ปุ่ม

<button name="data" type="button" onclick="getData()">Click</button>

ค่าเริ่มต้นของtypeปุ่มคือsubmitซึ่งตัวเองโพสต์แบบฟอร์มในกรณีของคุณและทำให้มันดูเหมือนรีเฟรช

สิ่งที่คุณต้องทำคือใส่แท็กประเภทและทำให้ปุ่มประเภท

<button id="btnId" type="button">Hide/Show</button>

ที่ช่วยแก้ปัญหา

ปัญหาคือมันก่อให้เกิดการส่งแบบฟอร์ม ถ้าคุณสร้างgetDataฟังก์ชั่นreturn falseมันก็ควรจะหยุดฟอร์มจากการส่ง

อีกวิธีหนึ่งคุณสามารถใช้preventDefaultวิธีการของวัตถุเหตุการณ์:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

แทนที่จะใช้แท็กปุ่มใช้แท็กอินพุต แบบนี้,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

หากปุ่มของคุณเป็นปุ่ม "เริ่มต้น" ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าแอตทริบิวต์ type มิฉะนั้น WebForm จะถือว่าเป็นการส่งเป็นค่าเริ่มต้น

ถ้าคุณใช้ js ทำเช่นนี้

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

วิธีการจาวาสคริปต์เพื่อปิดการใช้งานปุ่มเอง

document.getElementById("ID NAME").disabled = true;

เมื่อเขตข้อมูลฟอร์มทั้งหมดเป็นไปตามเกณฑ์ของคุณคุณสามารถเปิดใช้งานปุ่มได้อีกครั้ง

การใช้ Jquery จะเป็นอย่างนี้

$( "#ID NAME" ).prop( "disabled", true);

ไม่ว่าด้วยเหตุผลใดก็ตามใน Firefox แม้ว่าฉันจะมีreturn false;และmyform.preventDefault();ในฟังก์ชั่นมันจะรีเฟรชหน้าเว็บหลังจากที่ฟังก์ชั่นทำงาน และฉันไม่รู้ว่านี่เป็นวิธีปฏิบัติที่ดีหรือไม่ แต่มันเหมาะกับฉันฉันใส่javascript:this.preventDefault();ในแอ็ตทริบิวต์การกระทำ

ขณะที่ผมกล่าวว่าฉันพยายามทุกข้อเสนอแนะอื่น ๆ และพวกเขาทำงานได้ดีในเบราว์เซอร์ Firefox แต่ถ้าคุณมีปัญหาเดียวกันลองเพิ่มป้องกันไม่ให้เหตุการณ์ในแอตทริบิวต์การดำเนินการอย่างใดอย่างหนึ่งหรือjavascript:return false; javascript:this.preventDefault();อย่าลองด้วยjavascript:void(0);ซึ่งจะทำลายรหัสของคุณ อย่าถามฉันทำไม :-)

ฉันไม่คิดว่านี่เป็นวิธีที่ยอดเยี่ยมที่จะทำ แต่ในกรณีของฉันฉันไม่มีทางเลือกอื่น

ปรับปรุง:

หากคุณได้รับข้อผิดพลาด ... หลังจาก ajax ถูกประมวลผลแล้วให้ลบแอ็คชันแอ็ตทริบิวต์และในonsubmitแอ็ตทริบิวต์ให้เรียกใช้ฟังก์ชันของคุณตามด้วยการส่งคืนเท็จ:

onsubmit="functionToRun(); return false;"

ฉันไม่รู้ว่าทำไมปัญหาทั้งหมดนี้กับ Firefox แต่หวังว่าจะได้ผล

ฟังก์ชันส่งคืนไม่ทำงานในทุกกรณี ฉันลองสิ่งนี้:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

มันใช้งานไม่ได้สำหรับฉัน

ฉันพยายามกลับเท็จภายในฟังก์ชั่นและมันก็ใช้ได้สำหรับฉัน

function Reset()
{
    .
    .
    .
    return false;
}

ฉันกำลังเผชิญกับปัญหาเดียวกัน ปัญหาเกิดขึ้นกับonclickฟังก์ชั่น ไม่ควรมีปัญหาใด ๆ getDataกับฟังก์ชั่น มันทำงานโดยการทำให้onclickฟังก์ชั่นกลับเท็จ

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

อันนี้เป็นทางออกที่ดีที่สุด:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

หมายเหตุ: รหัสของฉันง่ายมาก

คุณสามารถใช้ ajax และ jquery เพื่อแก้ปัญหานี้:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>