Gönder düğmesi onclick etkinliğinde form gönderimini nasıl iptal ederim?

Bir ASP.net web uygulaması üzerinde çalışıyorum.

Gönder düğmesi olan bir formum var. Gönder düğmesinin kodu gibi görünüyor <input type='submit' value='submit request' onclick='btnClick();'>.

Aşağıdakine benzer bir şey yazmak istiyorum:

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

Bunu nasıl yaparım?

Yapman daha iyi ...

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

Eğer isValidForm()iadeler false, sonra formu göndermek değildir.

Ayrıca muhtemelen olay işleyicinizi satır içi konumundan taşımalısınız.

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

Girişinizi şuna değiştirin:

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

Ve işlevinde yanlış döndür

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

Değişmen gerek

onclick='btnClick();'

-e

onclick='return btnClick();'

ve

cancelFormSubmission();

-e

return false;

Bununla birlikte, iyi bir olay işleme API'sine sahip olan ve gerçekten önemli olan olaya (yani bunun yerine formun gönderme olayına) bağlanan bir kitaplıkla (YUI veya jQuery gibi) göze batmayan JS lehine iç olay özniteliklerinden kaçınmaya çalışırım. düğmenin tıklama olayının).

Bazen onsubmitasp.net ile çalışmazdı.

Çok kolay bir şekilde çözdüm.

eğer böyle bir formumuz varsa

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

Artık bu olayı geri göndermeden önce yakalayabilir ve geri göndermeden durdurabilir ve bu jquery'yi kullanarak istediğiniz tüm ajax'ı yapabilirsiniz.

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

türü olarak submitdeğiştirmelisiniz button:

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

onun yerine

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

daha sonra javascript'te düğmenizin adını alır ve istediğiniz eylemi ona ilişkilendirirsiniz

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

benim için çalıştı umarım yardımcı olur.

Yapmanız gerekenler return false;:

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

function btnClick() {
    return validData();
}

Neden gönder düğmesini normal bir düğme olarak değiştirmiyorsunuz ve tıklama olayında, doğrulama testlerinizi geçerse formunuzu göndermiyorsunuz?

Örneğin

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

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

İhtiyacın var onSubmit. Değil onClickaksi birisi sadece basın girebilir ve sizin doğrulama atlayacaktır. İptal etme gelince. false döndürmeniz gerekiyor. İşte kod:

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

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

Edit onSubmit, form etiketine aittir.

Çok basit, sadece yanlış döndürün;

Aşağıdaki kod, jquery kullanılarak gönder düğmesine tıklandığında girilir ..

if(conditionsNotmet)
{
return false;
}

kullanım onclick='return btnClick();'

ve

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 ile daha da basit: Asp.Net MVC ve Asp.Core'da çalışır

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

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