Tôi làm cách nào để hủy gửi biểu mẫu trong nút gửi khi sự kiện nhấp?

Question

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

Tôi có biểu mẫu có nút gửi. Mã cho nút gửi trông giống như <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 để làm điều này?

Answer 1

Bạn đang khấm khá hơn làm ...

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

Nếu isValidForm() lợi nhuận false, sau đó hình thức của bạn không nộp.

Bạn cũng có thể 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(); 
}; 

Answer 2

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

và

function btnClick() { 
    return validData(); 
} 

Answer 3

function btnClick() { 
    return validData(); 
} 

Answer 4

Bạn cần thay đổi

onclick='btnClick();' 

để

onclick='return btnClick();' 

và

cancelFormSubmission(); 

để

return false; 

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

Answer 5

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

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

Và trả về false trong chức năng của bạn

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

Answer 6

Tại sao không thay đổi nút gửi để một nút thường xuyên, và trên sự kiện click, nộp mẫu đơn của bạn nếu nó vượt qua các bài kiểm tra xác nhận của bạn?

ví dụ

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

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

Answer 7

Bạn cần onSubmit. Không phải onClick nếu không ai đó chỉ có thể nhấn enter và nó sẽ bỏ qua xác thực của bạn. Đối với hủy bỏ. bạn cần trả về false. Dưới đây là các mã:

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

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

Sửa onSubmit thuộc trong thẻ form.

Answer 8

Bạn cần phải return false;:

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

function btnClick() { 
    return validData(); 
} 

Answer 9

bạn nên thay đổi kiểu từ submit để button:

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

thay vì

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

sau đó bạn sẽ có được tên của nút bấm của bạn trong javascript và liên kết bất kỳ hành động bạn muốn nó

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

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

Answer 10

Thật đơn giản, chỉ cần trả về false;

Mã dưới đây đi trong onclick của nút gửi bằng jquery ..

if(conditionsNotmet) 
{ 
return false; 
} 

Answer 11

Đôi khi onsubmit sẽ không làm việc với asp.net.

Tôi đã giải quyết nó theo 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 được rằng sự kiện trước khi form postback và ngăn chặn nó từ postback và làm tất cả những ajax bạn muốn sử dụng jquery này.

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