Bagaimana cara membatalkan pengiriman formulir di acara onclick tombol kirim?

Saya sedang mengerjakan aplikasi web ASP.net.

Saya memiliki formulir dengan tombol kirim. Kode untuk tombol kirim terlihat seperti ini <input type='submit' value='submit request' onclick='btnClick();'>.

Saya ingin menulis sesuatu seperti berikut:

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

Bagaimana saya melakukan ini?

Anda lebih baik melakukan ...

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

Jika isValidForm()kembalifalse , maka formulir Anda tidak terkirim.

Anda juga mungkin harus memindahkan pengendali acara Anda dari sebaris.

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

Ubah masukan Anda menjadi ini:

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

Dan kembalikan false dalam fungsi Anda

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

Anda perlu berubah

onclick='btnClick();'

untuk

onclick='return btnClick();'

dan

cancelFormSubmission();

untuk

return false;

Yang mengatakan, saya akan mencoba untuk menghindari atribut acara intrinsik yang mendukung JS yang tidak mengganggu dengan perpustakaan (seperti YUI atau jQuery) yang memiliki API penanganan acara yang baik dan terkait dengan acara yang benar-benar penting (yaitu acara pengiriman formulir sebagai gantinya dari acara klik tombol).

Terkadang onsubmittidak berfungsi dengan asp.net.

Saya menyelesaikannya dengan cara yang sangat mudah.

jika kita memiliki bentuk seperti itu

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

Anda sekarang dapat menangkap acara itu sebelum formulir postback dan menghentikannya dari postback dan melakukan semua ajax yang Anda inginkan menggunakan jquery ini.

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

Anda harus mengubah tipe dari submitmenjadi button:

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

dari pada

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

Anda kemudian mendapatkan nama tombol Anda dalam javascript dan mengaitkan tindakan apa pun yang Anda inginkan

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

bekerja untuk saya semoga membantu.

Anda perlu return false;:

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

function btnClick() {
    return validData();
}

Mengapa tidak mengubah tombol kirim menjadi tombol biasa, dan pada acara klik, kirimkan formulir Anda jika lolos tes validasi?

misalnya

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

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

Anda membutuhkan onSubmit. Bukan onClicksebaliknya, seseorang dapat menekan enter dan itu akan melewati validasi Anda. Adapun pembatalan. Anda harus mengembalikan false. Berikut kodenya:

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

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

Edit onSubmit termasuk dalam tag formulir.

Sederhana saja, kembalikan false;

Kode di bawah ini masuk dalam satu klik tombol kirim menggunakan jquery ..

if(conditionsNotmet)
{
return false;
}

menggunakan onclick='return btnClick();'

dan

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Dengan JQuery bahkan lebih sederhana: bekerja di Asp.Net MVC dan Asp.Core

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

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