I guess I have never tried to do this before ... I have a button on a page.
<input type="submit" id="btn" value="Submit">
And a javascript function that includes:
function clickit()
{
alert(document.getElementById('btn').value);
document.getElementById('btn').click();
}
Using Firefox, the button is not clicked - i.e. the form is not submitted. The alert shows, but the form does not get submitted. Why won't Firefox click a button?
Use a div or anything besides a INPUT element if you want to bind the click event to it. If <INPUT> is inside a form body, you might run into weird issues.
If you just need to submit a form with a button I would recommend that you just use a <div> element with a click handler rather than an input. It will give you a little more flexibility. If you do that then you should be able to just select your form and use the submit() API to submit the form.
If you really can't modify the code enough to do this and are having trouble selecting and submitting here is how you will need to do that using both jQuery and DOM.
The jQuery Way:
$("my selector").trigger("click")
You may run into issues around focus if you're running in PhantomJS or you've got a window like a test runner that is not in focus. In this case you can use:
$(<my selector>).triggerHandler(<my event>)
The DOM API way
This will just trigger the event (the equivalent of the first example)
// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });
// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);
You can also simulate a click with the actual DOM method
var button = document.getElementById('my-button');
button.click();
Why won't Firefox click a button?
I seem to recall that early versions of Firefox didn't allow calling of listeners that way for security reasons. However, I think those reasons have been addressed in other ways and now you should be able to call the click handler directly. The following submits the form in Firefox 34:
<form onsubmit="alert('submitted!!')">
<input name="foo" value="foo">
<input type="submit" id="aa">
</form>
<br>
<button onclick="document.getElementById('aa').click();">Click the submit button</button>
The form's submit listener is called and the form is submitted, so calling the submit button's click method is doing what it's supposed to.
This method doesn't work for all listeners though, click is a special case, see W3C DOM Level 3 Events Specification, §3.5 Activation triggers and behavior.
Related
event handler gets called
<form>
<input/>
<button onclick="this.form.submit();">submit</button>
</form>
event handler does not get called
<form>
<input/>
<button onclick="var btn=this;btn.disabled=true;setTimeout(function(){btn.disabled=false;},1500);this.form.submit();">submit</button>
</form>
Without modifying the <button> HTML, is there some way I can bind an event the to the form submit? It doesn't seem to fire if I disable the button before submitting the form.
I think this only happens in Chrome (tested on Ubuntu and Win7). Both fiddles work in Win7 Firefox 11.
if you move the function out of the button element it works fine http://jsfiddle.net/272tw/8/
or if you need to keep it in the button putting it in an anon function works also http://jsfiddle.net/272tw/9/
Is it possible to assign the return key as a shortcut for an anchor. Just like when submitting a form if one of the input fields are on focus.
I have looked a little at the jQuery hotkeys but since I'm lacking some skills in js I can't quite figure it out.
My plan is that when the page loads the user can just press enter. Then an action will be performed followed by a redirect. I'm trying to do this
Reason for doing this is that I believe it's a lot faster for the user to press enter than to move the cursor and click on the link before the actual action takes place.
Much more simple will be to auto focus the link:
window.onload = function() {
document.getElementById("changeStatusLink").focus();
}
No jQuery is required and as it's focused, Enter press will trigger the click event.
If it's a form (e.g. with id #myform) why not to try to trap the user submit using this code. You need to put a hidden form submit element inside the form.
HTML
<form id="myform">
<input type="text" name="email" />
<input type="submit" style="display: hidden;" />
Click here to do some action
</form>
Javascript
$(function(){
$('#myform').submit(function(){
$(this); // this refers to the form
$('#your-link-id').click();
return false;
});
});
See: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
Note: the code is untested but it should work.
I have a form, very basic, and when I hit enter key nothing happens in firefox, but in google chrome it submits. Haven't tried other browsers yet...
Nothing happens at all when hitting enter in firefox.
When clicking the submit button it works fine in both browsers.
The form is inside a DIV, and the form has javascript too, here is the form simplified:
<form id="nav_form_main" name="nav_form_main" action="bincgi/sql_query.php" target="iframe001" method="get" onSubmit="reset_pager();">
<input type="button" name="nav_submit" id="nav_submit" value="Search" onClick="reset_and_subm();" style="width: 58px; font-size: 13px;">
//some other elements...
</form>
and here is the js:
function reset_pager(){
byId("p").value = 0;
}
function reset_and_subm(){
byId("p").value = 0;
document.forms["nav_form_main"].submit();
}
The reset_pager function is not called at all... which is strange because it is an "onsubmit" function. So it is like the form isn't submitted at all.
However, the results in the targeted iframe appear fine, without any problem.
Any ideas?
Thanks
Enter for submit is only triggered if <input type="submit> exists on the form. You can add a hidden one for this purpose, but keep in mind that it will submit the form and bypass the onclick event you're looking to capture. You'll need to patch into the onsubmit action of the form to run your function.
As Diodeus mentioned, you need an <input type="submit"> tag in your form if you want to use the ENTER key to submit the form.
The reason that your reset_pager function is not firing on the onsubmit event is because the onsubmit event is never fired. Though it's somewhat counter-intuitive, using the submit() method on a form (as you're doing in your reset_and_subm function) will not cause the onsubmit event to fire.
You have a couple options:
You can add an <input type="submit"> to your form and put all your logic in an onsubmit callback function.
Watch all keypress events on the form. If the ENTER key is pressed or the button is clicked, then call a function that does all the stuff you want to happen before submitting the form and then call submit() on the form.
It might be a beginner question but I can't understand why the onchange event is never called by IE while it works Ok with Firefox.
<input type="text" id="mytext" size="48" value="" onchange="execute()"/>
<button type="button" onclick="execute()">Go</button>
The execute function is called when the button is clicked but not when the text in the input box is changed.
Any idea?
IE only fires the onchange event when the element loses focus - if you were to click outside the element or tab to a different element it should fire then.
You can get around this by using a different event, for example onkeypress.
While annoying, it is not a bug that onchange is not fired until the element loses focus. (I get around the issue by having multiple bindings for different events; make sure not to clobber a handler and use an update aggregation if appropriate.)
Here is the "official" W3C documentation on the subject:
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.
Here is the MSDN reference:
This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather [it is fired] when the user commits the change by leaving the text box that has focus.
The behavior, while often annoying, is as specified.
As answered elsewhere, IE doesn't fire the event till you click outside the input field.
Just a quick expaination of how I fixed it with jQuery. (This is a translation of my code, so it may contain bugs...)
<input id="somecheck" name="somecheck" value="1" onchange="dosomething();">
...was changed to...
<input id="somecheck" name="somecheck" value="1">
<script language="javascript">
$(document).ready(function() {
$('#somecheck').change(function() { dosomething(); } );
});
</script>
For those new to jQuery you are basically waiting for the page to become fully loaded, then you are adding the event handler 'dosomething' to the input box.
As far as i remember, IE doesn't handle onchange event the same maner as FF.
The event will be fired when the mouse is clicked.
I advise you to use a library to handle events such as jQuery, Dojo, etc..
ohhh, I spent some time on that issue as well months ago.
I came up with this solution for FF/IE onchange
$("input[name*='delivery_method']").bind(($.browser.msie ? "click" : "change"), function() {
//your code here
});
IE does it after your input loses focus, which isn't until you click the button, tab out, or click somewhere else on the screen. Try onclick or one of the other events.
I have a few textboxes and button to save their values on a web page. The onchange event of the textboxes fires some js which adds the changed text to a js array. The ok button when clicked flushes this to the database via a webservice. This works fine except when the onchange event is caused by clicking the ok button. In this scenario the onchange of the textboxes still fires but the onClick event of the button does not. Any ideas?
textboxes look something like:
<input name="ctrlJPView$tbcTabContainer$Details$JP_Details_Address2Text" type="text" value="test"
id="ctrlJPView_tbcTabContainer_Details_JP_Details_Address2Text" onchange="addSaveDetails('Jobs###' + document.getElementById('ctrlJPView_tbcTabContainer_Details_JP_Details_Address2Text').value + ');" style="font-size:8pt;Left:110px;Top:29px;Width:420px;Height:13px;Position:absolute;" />
My save button:
<input type="button" name="ctrlJPView$btnOk" value="OK" onclick="saveAmendments();refreshJobGrids();return false;__doPostBack('ctrlJPView$btnOk','')" id="ctrlJPView_btnOk" class="ControlText" style="width:60px;" />
UPDATE: I guess this comes down to one of two things.
Something is happening before the onClick of the button gets called to surpress that call such as an inadvertent return false; or
the onClick event isn't firing at all.
Now I've remembered out everything actually inside the functions that are being called beforehand but the problem persists, but if I remove the call altogether it works!
is the __doPostBack function the one failing to execute? in this case, the return false is the obvious problem - once you return, no more code gets executed.
on a more pedantic note, you should really stop using onBlah handlers in your html, and instead use a modern javascript library that provides event observers. i recommend jquery but extjs or prototype would also work and make life much easier for you in a thousand other ways.