我在尝试取消提交表单时遇到了一些麻烦。我一直在关注这个教程(即使我没有制作登录脚本),它似乎对他有用。
这是我的表格:
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
这是jquery:
$(document).ready(function() {
$('form[name=pForm]').submit(function(){
return false;
});
});
我已经在标题中导入了jQuery,我知道它正在运行。我的第一个想法是它可能已经过时了,但它实际上是“一年前”。
所以有人看到了什么问题吗?
提前致谢。
编辑:从我读过的最简单,最合适的中止提交方式是返回错误?但我似乎无法让它发挥作用。我搜索了论坛,我发现了几个有用的线程,但没有一个真正起作用。我一定是搞砸了。
答案 0 :(得分:11)
$(document).ready(function(event) {
$('form[name=pForm]').submit(function(event){
event.preventDefault();
//add stuff here
});
});
答案 1 :(得分:9)
感谢大家回复!我的一个朋友请我添加
onsubmit="return(false)
在表格上。这有效,但我仍然想知道一个非内联的JavaScript技巧。
答案 2 :(得分:4)
您指出“在'返回false'之前的警报未显示”。
使用jQuery时,submit元素的id或名称不能为'submit' - 如果是,则不会触发提交事件。
答案 3 :(得分:2)
应该可以正常工作。事情可能更多。不幸的是,你问题中的代码不是SSCCE的味道,所以很难确定根本原因。可能你根本没有导入jQuery库。或者您在导入jQuery库之前调用了$(document).ready()
。或者你有另一个与$()
冲突的JS库。或者实际表单没有所需的名称。 Etc..etc ..
为了帮助您入门,这里有一个值得信赖的SSCCE。你需要做的就是复制'n'paste'n'run它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3569072</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('form[name=pForm]').submit(function() {
alert('Submit blocked!');
return false;
});
});
</script>
</head>
<body>
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
</body>
</html>
如果它有效(至少,它在这里工作,我得到一个提醒,表单根本没有提交),将它与你自己的代码进行比较,并尝试将你自己的代码减少到这种味道,这样你就可以更好发现差异(以及你的错误)。
无论如何,在我看来,值得努力让自己通过一些基本的/简单的jQuery(最好也是JavaScript)教程,这样你就可以更好地理解幕后的内容,并学习如何使用像Firebug
答案 4 :(得分:2)
我也有这个问题,我的代码(不起作用)是这样的:
$('#upload_form').submit(function(){ before_submit('argument') });
并且在“before_submit”函数内部我有“return false”来阻止表单提交:
function before_submit() {
.........................................................
return false;
}
在将事件处理程序函数绑定到表单时,我将“return”置于其中:
$('#upload_form').submit(function(){ return before_submit('argument') });
附加到submit事件的函数必须返回false(在我的例子中是匿名函数)。 所以......这是解决这个问题的原因之一
答案 5 :(得分:2)
我对这个(未答复的,过时的)问题的谦逊贡献。 我已经使用相同的解决方案多次运行此问题:
不要使用
<input name="submit" />
与
一起$('form').submit(function(){...});
这会触发错误的元素/项目,不会出现错误或警告。所以只需将提交按钮命名为其他内容,所有内容都会神奇地重新开始工作。
答案 6 :(得分:2)
您尝试访问的表单可能会动态添加到您的页面中。在这种情况下,您需要使用委托来访问该表单
示例:
$(document).delegate("#myform","submit",function(){
return false;
});
答案 7 :(得分:1)
name的值需要引用它。试试这个:
$(document).ready(function() {
$("form[name='pForm']").submit(function(){
return false;
});
});
答案 8 :(得分:0)
我遇到过类似的问题。我通过在验证之前删除表单的操作和方法来解决它们,然后在验证之后将它们添加回来。这是我写的验证器:
var Validator = function (formSelector) {
this.formSelector = formSelector;
// $(formSelector).submit(function() {return false;});
this.Action = $(formSelector).attr("action");
this.Method = $(formSelector).attr("method");
$(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});
var donotsubmit = false;
var notjustcheckbox = false;
var checknotchecked = false;
this.Required = new Array();
this.Email = new Array();
this.validate = function () {
this.form = $(this.formSelector);
var i = 0;
for (i in this.Required){
$(this.Required[i]).attr("value", function(index,attr){
// Check on checkboxes...
if (this.getAttribute("type") == "checkbox"){
if (this.checked == false){
checknotchecked = true;
donotsubmit = true;
} else {
}
} else {
if (attr == "" || attr == undefined){
this.style.border = "1px solid red";
notjustcheckbox = true;
donotsubmit = true;
} else {
this.style.border = "1px solid green";
}
}
});
}
i = 0;
for (i in this.Email){
$(this.Email[i]).attr("value", function(index,email){
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
if (filter.test(email) == true || filter.test(email) == "true") {
this.style.border = "1px solid green";
} else if (filter.test(email) == false) {
donotsubmit = true;
notjustcheckbox = true;
this.style.border = "1px solid red";
}
});
}
if (donotsubmit == true){
if (checknotchecked == true && notjustcheckbox == true){
alert("Please correct the fields in red and check the required checkboxes");
} else if (checknotchecked == true && notjustcheckbox == false){
alert("Please check the required checkboxes");
} else {
alert("Please correct the fields in red");
}
checknotchecked = false;
notjustcheckbox = false;
donotsubmit = false;
} else {
$(formSelector).attr({action : ''+this.Action+''});
$(formSelector).attr({method : ''+this.Method+''});
$(formSelector).submit();
}
return true;
};
};
您可以像这样实现:
$(document).ready(function(){
var myForm = new Validator("#formId");
myForm.Required = new Array("input.lightborder");
myForm.Email = new Array("#email");
$("#form-submit-button-id").click(function(){
myForm.validate();
});
});
您可以为必填字段添加CSS选择器。电子邮件必须是唯一的。
答案 9 :(得分:0)
我遇到了同样的问题,而且在表单上使用Rails和:remote => true
。 Rails jQuery驱动程序进入并通过ajax提交表单,而我自己的函数试图使用return false
和event.preventDefault()
来阻止提交过程。
请注意那些干扰您自己的javascript的框架和默认操作。 return false
应该有效:)
答案 10 :(得分:0)
你必须做一种“双重回报”,换句话说,你必须返回返回的内容。所以,你有你的html:
<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
如上所示,您只需要一个名为onsubmit
的jquery函数:
function cancelSubmit() {
return false; // return true if you want submission to carry through
}
您可以在上面的函数中添加任何类型的条件。看来你只是想取消它。希望这对遇到这个答案的其他人有帮助。
答案 11 :(得分:-1)
这个怎么样?
$('form[name=pForm]').on('submit',function()
{
console.log("(^o^)");
return false;
});