ฉันจะยกเลิกการส่งแบบฟอร์มในปุ่มส่งในเหตุการณ์คลิกได้อย่างไร

ฉันกำลังทำงานกับเว็บแอปพลิเคชัน ASP.net

ฉันมีแบบฟอร์มที่มีปุ่มส่ง รหัสสำหรับปุ่มส่งมีลักษณะ<input type='submit' value='submit request' onclick='btnClick();'>ดังนี้

ฉันต้องการเขียนสิ่งต่อไปนี้:

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

ฉันต้องทำอย่างไร

คุณทำดีกว่า ...

<form onsubmit="return isValidForm()" />

หากisValidForm()ส่งคืนfalseแบบฟอร์มของคุณจะไม่ส่ง

นอกจากนี้คุณควรย้ายตัวจัดการเหตุการณ์จากอินไลน์

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

เปลี่ยนข้อมูลของคุณเป็นสิ่งนี้:

<input type='submit' value='submit request' onclick='return btnClick();'>

และคืนค่าเท็จในฟังก์ชันของคุณ

function btnClick() {
    if (!validData())
        return false;
}

คุณจำเป็นต้องเปลี่ยน

onclick='btnClick();'

ถึง

onclick='return btnClick();'

และ

cancelFormSubmission();

ถึง

return false;

ที่กล่าวว่าฉันพยายามหลีกเลี่ยงแอตทริบิวต์เหตุการณ์ที่อยู่ภายในเพื่อสนับสนุนJS ที่ไม่สร้างความรำคาญกับไลบรารี (เช่น YUI หรือ jQuery) ที่มี API การจัดการเหตุการณ์ที่ดีและเชื่อมโยงกับเหตุการณ์ที่สำคัญจริงๆ (เช่นส่งเหตุการณ์ของแบบฟอร์มแทน ของเหตุการณ์การคลิกของปุ่ม)

บางครั้งonsubmitก็ใช้ไม่ได้กับ asp.net

ฉันแก้ไขมันด้วยวิธีที่ง่ายมาก

หากเรามีแบบฟอร์มดังกล่าว

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

ตอนนี้คุณสามารถรับเหตุการณ์นั้นก่อนโพสต์แบ็คแบบฟอร์มและหยุดไม่ให้โพสต์แบ็คและทำอาแจ็กซ์ทั้งหมดที่คุณต้องการโดยใช้ jquery นี้

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

คุณควรเปลี่ยนประเภทจากsubmitเป็นbutton:

<input type='button' value='submit request'>

แทน

<input type='submit' value='submit request'>

จากนั้นคุณจะได้รับชื่อปุ่มของคุณในจาวาสคริปต์และเชื่อมโยงการกระทำที่คุณต้องการ

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

ทำงานให้ฉันหวังว่ามันจะช่วยได้

คุณต้องreturn false;:

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

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

เช่น

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

onSubmitคุณจำเป็นต้อง ไม่ได้onClickมิฉะนั้นคนที่สามารถเพียงแค่กดและจะหลีกเลี่ยงการตรวจสอบของคุณ สำหรับการยกเลิก. คุณต้องคืนค่าเท็จ นี่คือรหัส:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

แก้ไข onSubmit อยู่ในแท็กฟอร์ม

ง่ายๆแค่คืนค่าเท็จ

โค้ดด้านล่างจะอยู่ภายในคลิกปุ่มส่งโดยใช้ jquery ..

if(conditionsNotmet)
{
return false;
}

ใช้ onclick='return btnClick();'

และ

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

ด้วย JQuery นั้นง่ายกว่าเดิม: ทำงานใน Asp.Net MVC และ Asp.Core

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>