[英]How do I allow form submission with the submit button and the enter key?
[英]How do I cancel form submission in submit button onclick event?
我正在处理 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 (即表单的提交事件)按钮的点击事件)。
有时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");
});
});
您应该将类型从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();
}
这是一个非常古老的线程,但肯定会被注意到。 因此请注意,提供的解决方案不再是最新的,现代 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();
}
很简单,返回false即可;
下面的代码在使用 jquery 的提交按钮的 onclick 中。
if(conditionsNotmet)
{
return false;
}
你需要onSubmit
。 不是onClick
否则有人可以按回车键,它将绕过您的验证。 至于取消。 你需要返回false。 这是代码:
<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>
function btnClick() {
if (!validData()) return false;
}
编辑onSubmit 属于表单标签。
使用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>
只需将控件和提交按钮放在两者之间
<form></form>
标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.