I have a simple form which can be submitted outside the element via a small jQuery Script.
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function(){
$('#myform').attr('action', '/url/to/form').submit();
});
});
</script>
The button is just a normal link
Just a normal link
The form is just a normal form
<form id="myform" action="/url/to/form">
....
<input type="submit" value="Search">
</form>
This works fine in IE, FF, Chrome, and Safari but not for Opera. In Opera it always redirects to my home page, not to the url of the form action. I have tried setting the action in the script (as above) and normally within the form action parameter but with no luck. I'm running that latest jQuery and Opera.
Please help
Edit: I'm also using the jQuery UI framework to handle some of the content and interactions
First thing I would do is change the handler to prevent the default action for the link:
$('#mybutton').click(function(ev){
ev.preventDefault();
$('#myform').attr('action', '/url/to/form').submit();
});
Using <a> tags for buttons means that you have to be careful that the browser doesn't get confused over the semantics. I don't have a lot of experience debugging things on Opera, but that's the first thing I'd suspect.
If there's no real "href" associated with the "button", I would question why it's an <a> tag at all; it could be just a simple <span>, which can also have a click handler attached but which does not have any potentially-problematic native behavior.
I believe it will be something to do with, with the currently incomplete jquery ui select class. It adds an a tag with a href as # i believe this may be your problem.
Try just $('#myform').submit(); instead of $('#myform').attr('action', '/url/to/form').submit();
Edit: As the other answer said, you will first have to call event.preventDefault(); before doing anything on the click event, as that prevents the browser from redirecting you.
Edit2: The right code would be:
<script type="text/javascript">
$(document).ready(function() {
$('#mybutton').click(function(event){
event.preventDefault();
$('#myform').attr('action', '/url/to/form').submit();
});
});
This should work fine.
Related
I am working on a website for an academic project and I just encountered a pretty weird problem. I have searched but was unable to find anything similar.
I have a form that I hide/show (jQuery functions) using some buttons. And it works perfectly. But i also want to display this form when the user clicks on a link (html a element). The problem is that when I click on the link the form appears and disappears very quickly. It works perfectly if I replace the a element with a button or a span.
For information I use jade as a templating engine to create my HTML.
Here is an example of the jade:
a#edit(href="") #{event.name} // it is the link the create the problem
button#edit(href="") #{event.name} // but like that it work very well
And here is how I hide my form with JavaScript
$('#edit').on('click', function(){
$('#addForm').show();
});
edit: the solution
$('#edit').on('click', function(e){
e.preventDefault();
$('#addForm').show();
});
I think you need to add (if not present) the code to block the default behavior of the a tag
event.preventDefault();
//code
return false;
This question is inspired by this post.
In a nutshell: Why window.location.href is not redirecting to a new page (example.com) when executing the code below?
<form>
<input type="submit" id="submit" value="Submit">
</form>
<script>
document.getElementById('submit').addEventListener('click', function (e) {
window.location.href = "http://www.example.com";
});
</script>
I've always believed, that setting window.location.href immediately loads a new page, but in this case it doesn't. Submitting the form just reloads the page instead, and setting a new location seems to be totally ignored. Why? How? What I'm missing here?
Please notice, that I'm aware of several ways how to prevent form submitting in this case, rather I'd like to know, why setting location.href is ignored, what is the mechanism behind the behavior? I've tried to search explanation from the standard, but haven't found anything so far.
Additional information
This seems to happen in all major browsers (Chrome, Firefox, IE11, Edge ...), but not when the code is run in a Stack snippet (because it's sandboxed, and won't send forms anyway). A console.log put in the function shows, that the click handler is executed before the actual submission is executed.
A jsFiddle reproducing the issue.
You can see easier here what is happening step by step if you will try tu change location drunning form submission
JSFIDDLE
If you will check your browser network tab than you can see that the submit request is cancelled (but still sent) by redirect request. I believe that same situation occurs when you trying to do it onclick or onsubmit the first request just cancelling the next one and prevent window.location.href redirection.
I belive the key thing here is not to view the problem as 'form submission vs page redirect', but as an event-listeners issue.
What you are doing is to attach an event listener to an html element. And it seems that the policy of DOM elements is to execute all the event listeners first, and then the event itself . In your case, the page is redirected to the url you provided, because you set window.location inside the listener, then the submit event itself takes place, so the same blank page is reloaded
The fact that "event flow process will complete after all listeners have been triggered" is stated here: http://www.w3.org/TR/DOM-Level-2-Events/events.html
So far I haven't figgured out a way to execute the listeners after the event , but if that can be done, that is all you need to make this example work
The main issue is that there is nothing preventing the submit button from actually submitting the form. You would need a return false somewhere for that to happen. I'm not fully certain whether the Submit button logic or the click handler is happening first, but regardless, the form post is taking precedence.
I was able to get the following to work:
<html>
<head>
<script type="text/javascript">
function redirect() {
window.location.href = "http://www.example.com";
return false;
}
</script>
</head>
<body>
<form method="GET" action="">
<input type="submit" id="submitbtn" value="Submit" onclick="return redirect()" />
</form>
</body>
</html>
This example does remove the programmatic addition of the click event, but if that's a hard requirement it should be possible to add that back in.
i have the follow code:
<input class="any" type="text" id="myId" name="myName" />
this input is a jquery datepicker.. (http://jqueryui.com/datepicker/)
My JS is as follows:
$('#myId').keypress(function(evt) {
//codes
});
I tried keypress, keydown and keyup.. all not working in IE..
May be because of the jquery date picker plugin?
I also tried with jquery hotkey plugin (https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js)
But, no success :(
i just want to capture the enter event..
Any help?
Felipe
If the element doesn't exist on the page on the initial load, then the event may not be bound to the button. Not sure why it works in other browsers though.
Could possibly try this to see if it helps
$(document).on('keypress', '#myId', function() {
// ....
});
if you're using an older version of jQuery, then you'll need to use .live().
Solved: http://jsfiddle.net/MJWUw/
IE doesn't recognize a keyevent just with click in this input, but if i navigate until the field with tabspace it works..
i did a workaround to solve this, set the focus manually and it's working right now.
$("#myId").click(function(evt){$(this).focus();});
$('#myId').keyup(function(evt) {
alert('working!')
});
att
I don't know what is wrong with that, because I was following at every step the tutorial from jquery.com regarding the form submit event.
My Javascript:
[Ofc. latest jQuery library is included].
<script type="text/javascript">
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
</script>
Have also tried with the $(document).ready() event:
$(document).ready(function(){
$("form#addFav").submit(function(event) { event.preventDefault(); alert("hello"); });
});
Here is my HTML form code:
<form action="" id="addFav">
<input type="text" name="name" class="thin-d"/>
<input type="submit" value="Send"/>
</form>
So, regarding the above Javascript code, it is supposed to work (I mean it should prevent default action [submitting form] and send the alert then), but it all doesn't work - have tried with thousands of combinations, but I fail'd. So I'm waiting for your solutions. I'd appreciate every one.
You probably have some syntax error or somthing like that somewhere else, because what you have just works.
Are you sure there aren't any JS errors?
P.S. I would alwyas go for the latter code to ensure that the elements are in the DOM before trying to attach events.
For anyone else who has the same problem, and still struggling to solve this issue, try to see if you have illegally reused the id, and try changing the form id to something unique.
I had accidentally given the id to two different DOM elements and the event was being bound to the first element with the respective id and my form was the second one so it was never captured. This had me pulling my hairs for quiet a long.
I just recently ran into the same issue. Jquery on submit would not work on the form, however just changing it to click event worked fine. Still at a loss why .on(submit) or .submit() events will not recognize the form.
$("form#addFav").click(function (event) {
event.preventDefault(); alert("hello");
$(this).submit();
});
this question is old but.. you might have had another submit events firing before yours fired. If these other events contained "return false;" statement then the event execution got interrupted and your code never fired. To put your code BEFORE these events you might use ONSUBMIT form attribute where you can put code that will fire before or at the same time as other events.
I am writing a plugin to a CMS (umbraco) and I wish to attach a warning dialog to various actions on the page, one such action is clicking a link (JavaScript links), in most browsers the following code works well:
$(".propertypane").delegate("a, a div", "click", function () { window.onbeforeunload = confirmNavigateAway; });
The following is an issue in IE because IE appears to trigger onbeforeunload event when any link is clicked, even though the link is not navigating away.
I've set up an example here:
http://jsfiddle.net/DETTG/8/
Note: I do not have control over the ajax controls within the propertypane, they're written by third parties.
Maybe this page will help you?
If you remove "href" then it will work. But then you would need to style it as a link element and add the attribute onclick if you want to execute a function. Here is the updated version: http://jsfiddle.net/DETTG/34/
<a onclick="alert('do some ajax');" style="color:blue; text-decoration:underline; cursor:pointer">javascript</a>