I have simple form. I want to use jquery to prevent form submit.
$(document).ready(function() {
$('#searchform').submit(function(e) {
alert('Handler for .submit() called.');
event.preventDefault();
return false;
});
});
This works fine in chrome. It just shows me a alert box and does not redirect. But does not work on Firefox or IE9, it shows the alert and then goes ahead with form submission.
I appreciate any help.
change
event.preventDefault();
into
e.preventDefault();
Since you're already returning false, you don't also need any sort of event.preventDefault() call at all.
The reason that neither of these seem to work for you is that event is undefined, so an exception is thrown when calling event.preventDefault(), so the method handler exits prematurely.
event.preventDefault();
should be
e.preventDefault();
Try that and see if it fixes the problem.
Related
Hi Guys!
The problem is that I have a form which searches etc. The thing that go's wrong is that the first time you use the form nothing happens and it go's to domain/?. I have no idea what the problem is. I've tried a lot of things but nothing seems to be doing the trick. Thanks!
It seems like it doesn't prevent the default action on the first run because I've tried and a console.log inside this function won't run.
$(function () {
$('#search-bar').on('submit', function (e) {
var y = $('#search').val().toLowerCase();
if (y === 'location') {
geoSearch();
} else {
qCall(y);
}
x.val('');
e.preventDefault;
});
});
The forms HTML has not action or method
You probably cut down the form submit with e.preventDefault. According to W3C definition, the preventDefault javascript function do the following :
Definition and Usage The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
For example, this can be useful when:
Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL
So removing e.preventDefault(); from your code should do the trick.
And by the way, you forgot the double '()' behind the function name. I'm pretty sure you made the mistake only on the code posted, but worth the warning, we never know.
for whatever reason my code won't redirect to another file after I press submit.
$('form').submit(function () {
window.location.replace('test.html'); });
I have defined everything in an html file. Any ideas?
Thanks,
busterroni
You need to stop the form from submitting. That can be done by calling preventDefault() on the event object that is passed in.
$('form').submit(function (e) {
e.preventDefault();
window.location.replace('test.html');
});
Not cancelling the form submission, you created a race condition. You had the form submitting back to the current page and you had the location trying to navigate away.
If you want the back button to work, you probably want to use assign() and not replace().
I'm using jQuery .submit() for some form validation.
The validation has two checks:
Checks for null values in the input files
If not null, compared the selected files against a stored list
The validation functions both work fine, however, the submit event requires two clicks of the submit button to trigger if all the input fields have a value.
$(document).ready(function() {
$('form').submit(function() {
alert("Submitted");
});
});
I even stripped it down and changed to a click function and got the same result.
$(document).ready(function() {
$('#submitbutton').click(function(){
alert("Clicked");
});
});
Anyone else had this? I'm using IE8.
It's often being present in IE (IE9 Double Form Submit Issue).
I resolved it by adding onsubmit="return false" in form element.
I want to stop form from being submitted, and do something else instead (window.location.href redirect to pretty-printed URL). But I cannot even get the basic part of preventing form from submitting.
As far as I understand it something like this should work:
$(function($){
$("#search_form").submit(function(e){
console.log("cancelling submit");
return false;
});
});
I also tried e.preventDefault(), e.stopPropagation(), and various combinations of these. "cancelling submit" gets printed on Firebug console (so the event fires), but the form submits regardless, whatever I do.
jQuery documentation and logic imply that it should work, but it doesn't. Am I doing something wrong?
Hooking to click event might be easier but forms can be submitted in multiple ways - clicking buttons, pressing Enter, and probably something else I haven't thought about, so I'm trying to just take submit event.
I'm testing it all in Firefox.
EDIT: It turned out that <button type='submit' onclick='this.form.submit()'>Search</button> was causing this. It seems silly in retrospect. Thanks to everyone for help.
I've just tested your code at: http://jsfiddle.net/UZwr5/
The code you've provided works in that demo. Most likely you have a error somewhere in your execution that prevents the return false; from running.
try all of them together return false and e.StopPropagation() and e.preventDefault()
but more like this:
if(e.stopPropagation)
{
e.stopPropagation();
}
if(e.preventDefault)
{
e.preventDefault();
}
return false;
This keeps it much more cross browser compliant.
I have jQuery .click(function() event handlers attached to elements that I've selected by ID
example:
$('#deletethis').click(function() {
$(this).hide()
}
within my $(document).ready but this does not work at all with Safari, just nothing happens but it works fine with Chrome, Firefox, and IE. Console reports no javascript errors. Nothing inside the .click handler gets executed at all. Is there a work around for safari to accomplish the same effect?
Nevermind, found out it was an issue with only Safari not loading the javascript file, but all other browsers are. Got to figure that out now. . .
Have you tried this?
$('#deletethis').click(function() { $(this).hide(); });
Note the extra ; and );
Put a semicolon after hide().
End the click function with a ');' after the function.
Is #deletethis a link? Possibly with href="". If so, the default action on it is to navigate to the url of the page.
You can prevent the default action by calling e.preventDefault() in the click handler.
$('#deletethis').click(function(e) {
e.preventDefault();
$(this).hide();
});