Jak anulować wysłanie formularza w przycisku submit onclick event?

Zmień swoje wejście na to:

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

I zwraca false w funkcji

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

Musisz zmienić

onclick='btnClick();'

Do

onclick='return btnClick();'

I

cancelFormSubmission();

Do

return false;

To powiedziawszy, starałbym się unikać wewnętrznych atrybutów zdarzeń na rzecz dyskretnego JS z biblioteką (taką jak YUI lub jQuery), która ma dobre API obsługi zdarzeń i powiązać ze zdarzeniem, które naprawdę ma znaczenie (tj. Zdarzenie submit formularza zamiast zdarzenia kliknięcia przycisku).

Czasami onsubmit nie działa z asp.net.

Jeśli mamy taką formę

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

Możesz teraz złapać get that event przed postback formularza i zatrzymać go z postback i zrobić wszystko ajax chcesz za pomocą tego jquery.

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

Należy zmienić typ z submit na button:

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

Zamiast

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

Następnie otrzymujesz nazwę swojego przycisku w javascript i przypisujesz do niego dowolną akcję

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

Mam nadzieję, że to pomoże.

Musisz return false;:

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

function btnClick() {
    return validData();
}

To bardzo stary wątek, ale na pewno zostanie zauważony. Stąd należy zauważyć, że oferowane rozwiązania nie są już aktualne, a nowoczesny Javascript jest znacznie lepszy.

<script>
document.getElementById(id of the form).addEventListener(
    "submit",
    function(event)
    {
        if(validData() === false)
        {
            event.preventDefault();
        }
    },
    false
);

Formularz otrzymuje obsługę zdarzeń, która monitoruje przesyłanie. Jeśli wywołana tam Funkcja validData (nie pokazana tutaj) zwróci FALSE, wywołanie metody PreventDefault, która wstrzymuje wysyłanie formularza i przeglądarka wraca do wejścia. W przeciwnym razie formularz zostanie wysłany jako to co zwykle.

P. S. działa to również z atrybutem onsubmit . Następnie funkcja anonymus function (event){...} musi w atrybucieonsubmit formularza. To nie jest tak naprawdę nowoczesne i możesz pracować tylko z jednym opiekunem zdarzenia dla submit. Ale nie musisz tworzyć dodatkowego javascript. Ponadto może być określony bezpośrednio w kodzie źródłowym jako atrybut formularza i nie ma potrzeby czekać, aż formularz zostanie zintegrowany z DOM.

Dlaczego nie zmienić przycisku submit na zwykły przycisk, a na wydarzeniu click Prześlij formularz, jeśli przejdzie testy walidacyjne?

E. g

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

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

Potrzebujesz onSubmit. Nie onClick w przeciwnym razie ktoś może po prostu nacisnąć enter, a to ominie Twoją walidację. Co do odwołania. musisz zwrócić false. Oto kod:

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

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

Edit onsubmit należy do tagu formularza.

To proste, po prostu return false;

Poniższy kod znajduje się w onclick przycisku Wyślij za pomocą jquery..

if(conditionsNotmet)
{
return false;
}

Użyj onclick='return btnClick();'

I

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Z JQuery jest jeszcze prostsze: działa w Asp.Net MVC i Asp.Core

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

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