Come si annulla l'invio del modulo nell'evento su clic del pulsante di invio?

Sto lavorando su un'applicazione web ASP.net.

Ho un modulo con un pulsante di invio. Il codice per il pulsante di invio ha il seguente aspetto <input type='submit' value='submit request' onclick='btnClick();'>.

Voglio scrivere qualcosa come il seguente:

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

Come faccio a fare questo?

Stai meglio facendo ...

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

In caso di isValidForm()reso false, il modulo non viene inviato.

Probabilmente dovresti anche spostare il tuo gestore di eventi da inline.

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

Cambia il tuo input in questo:

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

E restituisci false nella tua funzione

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

Devi cambiare

onclick='btnClick();'

per

onclick='return btnClick();'

e

cancelFormSubmission();

per

return false;

Detto questo, proverei a evitare gli attributi intrinseci dell'evento a favore di JS non invadente con una libreria (come YUI o jQuery) che ha una buona API di gestione degli eventi e si collega all'evento che conta davvero (cioè l'evento di invio del modulo invece dell'evento clic del pulsante).

A volte onsubmitnon funzionerebbe con asp.net.

L'ho risolto in modo molto semplice.

se abbiamo una tale forma

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

Ora puoi catturare l'evento prima del postback del modulo e fermarlo dal postback e fare tutto l'ajax che vuoi usando questo jquery.

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

dovresti cambiare il tipo da submita button:

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

invece di

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

quindi ottieni il nome del tuo pulsante in javascript e associ l'azione che desideri ad esso

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

ha funzionato per me spero che aiuti.

Devi return false;:

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

function btnClick() {
    return validData();
}

Perché non modificare il pulsante di invio in un pulsante normale e, all'evento clic, inviare il modulo se supera i test di convalida?

per esempio

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

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

Hai bisogno onSubmit. Non onClickaltrimenti qualcuno può semplicemente premere invio e ignorerà la tua convalida. Per quanto riguarda la cancellazione. devi restituire false. Ecco il codice:

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

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

Modifica onSubmit appartiene al tag del modulo.

È semplice, basta restituire false;

Il codice seguente va all'interno del clic del pulsante di invio utilizzando jquery ..

if(conditionsNotmet)
{
return false;
}

uso onclick='return btnClick();'

e

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Con JQuery è ancora più semplice: funziona in Asp.Net MVC e Asp.Core

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

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