Làm cách nào để hủy gửi biểu mẫu trong sự kiện onclick vào nút gửi?

Tôi đang làm việc trên một ứng dụng web ASP.net.

Tôi có một biểu mẫu có nút gửi. Mã cho nút gửi trông như thế nào <input type='submit' value='submit request' onclick='btnClick();'>.

Tôi muốn viết một cái gì đó như sau:

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

Làm thế nào để tôi làm điều này?

Tốt hơn hết là bạn nên làm ...

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

Nếu isValidForm()trả lại false, thì biểu mẫu của bạn không gửi.

Bạn cũng có thể nên di chuyển trình xử lý sự kiện của mình từ nội tuyến.

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

Thay đổi đầu vào của bạn thành này:

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

Và trả về false trong hàm của bạn

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

Bạn cần thay đổi

onclick='btnClick();'

đến

onclick='return btnClick();'

và

cancelFormSubmission();

đến

return false;

Điều đó nói rằng, tôi sẽ cố gắng tránh các thuộc tính sự kiện nội tại có lợi cho JS không phô trương bằng một thư viện (chẳng hạn như YUI hoặc jQuery) có API xử lý sự kiện tốt và liên kết với sự kiện thực sự quan trọng (thay vào đó là sự kiện gửi của biểu mẫu của sự kiện nhấp vào nút).

Đôi khi onsubmitsẽ không hoạt động với asp.net.

Tôi đã giải quyết nó bằng cách rất dễ dàng.

nếu chúng ta có một hình thức như vậy

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

Bây giờ bạn có thể bắt lấy sự kiện đó trước khi đăng lại biểu mẫu và dừng nó khỏi quá trình đăng lại và thực hiện tất cả các ajax bạn muốn bằng cách sử dụng jquery này.

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

bạn nên thay đổi loại từ submitthành button:

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

thay vì

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

sau đó bạn lấy tên nút của mình trong javascript và liên kết bất kỳ hành động nào bạn muốn với nó

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

làm việc cho tôi hy vọng nó sẽ giúp.

Bạn cần return false;:

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

function btnClick() {
    return validData();
}

Tại sao không thay đổi nút gửi thành nút thông thường và trong sự kiện nhấp chuột, hãy gửi biểu mẫu của bạn nếu nó vượt qua các bài kiểm tra xác thực của bạn?

ví dụ

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

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

Bạn cần onSubmit. Không onClickkhác ai đó có thể chỉ nhấn enter và nó sẽ bỏ qua xác nhận của bạn. Đối với việc hủy bỏ. bạn cần trả về false. Đây là mã:

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

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

Chỉnh sửa onSubmit thuộc thẻ biểu mẫu.

Nó đơn giản, chỉ cần trả về false;

Đoạn mã dưới đây đi trong một cú nhấp chuột của nút gửi bằng jquery ..

if(conditionsNotmet)
{
return false;
}

sử dụng onclick='return btnClick();'

và

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

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

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

Với JQuery thậm chí còn đơn giản hơn: hoạt động trong Asp.Net MVC và Asp.Core

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

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