Як скасувати подання форми у події натискання кнопки onclick?

Я працюю над веб-додатком 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'>

потім ви отримаєте назву своєї кнопки в javascript і пов’язуєте будь-яку дію з нею

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>