jQuery - Cancel form submit (using "return false"?)?
I'm running into a bit of trouble while trying to cancel the submit of a form. I've been following this tutorial (even though i'm not making a login script), and it seems to be working for him.
Here's my form:
<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>
And here's the jquery:
$(document).ready(function() {
$('form[name=pForm]').submit(function(){
return false;
});
});
I've already imported jQuery in the header and i know it's working. My first thought was that it might be outdated, but it's actually "just" a year ago.
So do anyone see what's wrong?
Thanks in advance.
EDIT: From what i've read the easiest and most appropriate way to abort the submit is to return false? But i can't seem to get it working. I've searched the forum and i've found several helpful threads but none of them actually works. I must be screwing something up.
Try using event.preventDefault
$(document).ready(function(event) {
$('form[name=pForm]').submit(function(event){
event.preventDefault();
//add stuff here
});
});
Thanks for the respond everybody! A friend of mine tipsed me to add
onsubmit="return(false)
on the form. That works, but i'd still like to know a not-inline-javascript trick that works.
You indicate that "that the alert before the 'return false' doesn't show".
When using jQuery, the id or name of the submit element can not be 'submit' - if it is, then the submit event won't be fired.
It should work fine. There's likely more at matter. Unfortunately the code in your question is not in an SSCCE flavor so that it's hard to nail down the root cause. Probably you didn't import jQuery library at all. Or you called $(document).ready() before importing jQuery library. Or you have another JS library which is conflicting $(). Or the actual form doesn't have the desired name. Etc..etc..
To get you started, here's a fullworthy SSCCE. All you need to do is to copy'n'paste'n'run it.
<!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>
If it works (at least, it works here, I get an alert and the form isn't submitted at all), compare it with your own code and try to cutdown your own code into this flavor so that you can better spot the differences (and thus your mistake).
Regardless, in my opinion it will be worth the effort to get yourself through some basic/trivial jQuery (and preferably also JavaScript) tutorials so that you get a better understanding what's going on under the covers and learn how to use tools like Firebug.
I also had this problem, my code (that didn't work) was something like this:
$('#upload_form').submit(function(){ before_submit('argument') });
and inside the "before_submit" function i had "return false" to stop the form from submitting:
function before_submit() {
.........................................................
return false;
}
I put "return" when binding the event handler function to the form and it worked:
$('#upload_form').submit(function(){ return before_submit('argument') });
The function attached to the submit event has to return false (in my case the anonymous function). So...this is one solution to one cause of this problem
Just my humble contribution to this (unanswered, dated too) question. I've run on this problem several times already always with the same solution:
Don't use
<input name="submit" />
along with
$('form').submit(function(){...});
This fires the wrong element/item bringing no errors nor warnings. So just name your submit button something else and everything magically starts working again.
The form you're trying to access might be dynamically added to your page. You need to use delegate to access that form in that case
Example:
$(document).delegate("#myform","submit",function(){
return false;
});
The value of name needs quotes around it. Try this:
$(document).ready(function() {
$("form[name='pForm']").submit(function(){
return false;
});
});
You have to do a sort of 'double return', or in other words, you have to return what is returned. So, you have your 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>
Than you just have a jquery function that is called onsubmit as you see above:
function cancelSubmit() {
return false; // return true if you want submission to carry through
}
You can put any sort of conditionals in the function above. It seems you simply want to cancel it though. Hope this helps for others that come across this answer.
I've run into similar issues. I solved them by removing the action and method of the form prior to validation and then adding them back in after validation. Here is the validator I wrote:
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;
};
};
You can implement it like this:
$(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();
});
});
You can add CSS Selectors for required fields. The one for Email must be unique.
I had this same problem and it was down to using Rails and :remote => true on the form. Rails jQuery driver was coming in and submitting the form by ajax while my own function was trying to stall the submission process using return false and event.preventDefault().
So look out for frameworks and default actions that interfere with your own javascript. return false should work :)
How about this one?
$('form[name=pForm]').on('submit',function()
{
console.log("(^o^)");
return false;
});
加载中,请稍侯......
精彩评论