我正在开发一个 ASP.net Web 应用程序。
我有一个带有提交按钮的表单。提交按钮的代码如下所示<input type='submit' value='submit request' onclick='btnClick();'>
。
我想写如下内容:
function btnClick() {
if (!validData())
cancelFormSubmission();
}
我该怎么做呢?
我正在开发一个 ASP.net Web 应用程序。
我有一个带有提交按钮的表单。提交按钮的代码如下所示<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();'>
并在你的函数中返回 false
function btnClick() {
if (!validData())
return false;
}
你需要改变
onclick='btnClick();'
至
onclick='return btnClick();'
和
cancelFormSubmission();
至
return false;
也就是说,我会尽量避免内在的事件属性,转而使用具有良好事件处理 API 的库(例如 YUI 或 jQuery)并与真正重要的事件(即表单的提交事件)联系起来的不显眼的 JS按钮的单击事件)。
您应该将类型从更改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(){...};
为我工作希望它有所帮助。
有时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 执行您想要的所有 ajax。
$(document).ready(function () {
$("#login-btn").click(function (event) {
event.preventDefault();
alert("do what ever you want");
});
});
你需要return false;
:
<input type='submit' value='submit request' onclick='return btnClick();' />
function btnClick() {
return validData();
}
这是一个非常古老的线程,但肯定会引起注意。因此请注意,提供的解决方案不再是最新的,并且现代 Javascript 更好。
<script>
document.getElementById(id of the form).addEventListener(
"submit",
function(event)
{
if(validData() === false)
{
event.preventDefault();
}
},
false
);
表单接收一个监视提交的事件处理程序。如果调用的函数validData(此处未显示)返回 FALSE,则调用方法PreventDefault,该方法禁止提交表单,浏览器返回输入。否则,表格将照常发送。
PS 这也适用于属性onsubmit。那么匿名函数function(event){...}必须在表单的onsubmit属性中。这不是很现代,您只能使用一个事件处理程序进行提交。但是您不必创建额外的 javascript。此外,它可以直接在源代码中指定为表单的属性,无需等到表单集成到 DOM 中。
为什么不将提交按钮更改为常规按钮,并在单击事件中提交您的表单,如果它通过了您的验证测试?
例如
<input type='button' value='submit request' onclick='btnClick();'>
function btnClick() {
if (validData())
document.myform.submit();
}
你需要onSubmit
. 否则onClick
,有人可以按回车键,它会绕过您的验证。至于取消。你需要返回false。这是代码:
<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>
function btnClick() {
if (!validData()) return false;
}
Edit onSubmit 属于表单标签。
很简单,返回false即可;
下面的代码在使用 jquery 的提交按钮的 onclick 内。
if(conditionsNotmet)
{
return false;
}
使用 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>
利用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>