Menu
I have a form on an HTML page with multiple submit buttons that perform different actions. However, when the user is typing a value into a text input and hit enters, the browsers generally act as though the next submit button sequentially was activated. I want a particular action to occur, so one solution I found was to put in invisible submit buttons into the HTML directly after the text inputs in question, like this:
<input type="text" name="something" value="blah"/> <input type=submit name="desired" value="Save Earth" style="display: none"/> ... <input type=submit name="something_else" value="Destroy Earth" /> ... <input id="foobar" type=submit name="desired" value="Save Earth" /> This works like a charm in most browsers, except that it doesn't in webkit browsers like Safari and Chrome. For some reason they skip over the invisible submit button. I've been trying to figure out how to intercept the enter key press and activate the proper submission using Javascript, but I haven't been able to get it to work. Intercepting the keydown and setting focus on the proper submit does not work.
Is there any way using Javascript or otherwise to select which submit button will be used when the user hits the enter key in a text input on an HTML form?
Edit: To clarify, the form can't require Javascript to "work" fundamentally. I don't care if the enter key submission is undesireable without Javascript on webkit browsers, but I can't remove or change the order of the submit buttons.
This is what I tried, it doesn't change the submission behavior in webkit browsers.
What worked is to change the focus() in the following code to click().
document.onkeypress = processKey; function processKey(e) { if (null == e) e = window.event ; if (e.keyCode == 13) { document.getElementById("foobar").click(); // previously: focus() } } EDIT: FINAL SOLUTION:
Works with every browser and only intercepts the enter key when needed:
HTML:
<input type="text" name="something" value="blah" onkeydown="return processKey(event)" /> <input type=submit name="desired" value="Save Earth" style="display: none"/> ... <input type=submit name="something_else" value="Destroy Earth" /> ... <input id="foobar" type=submit name="desired" value="Save Earth" /> Javascript:
function processKey(e) { if (null == e) e = window.event ; if (e.keyCode == 13) { document.getElementById("foobar").click(); return false; } } 
700
To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.
To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.
To prevent form submission when the Enter key is pressed in React, use the preventDefault() method on the event object, e.g. event. preventDefault() . The preventDefault method prevents the browser from refreshing the page when the form is submitted.
And the following JavaScript code to detect whether the Enter key is pressed: const input = document. querySelector("input"); input. addEventListener("keyup", (event) => { if (event.
One way would be to remove all of the submit buttons and use input buttons to submit the form programatically. This would remove the ability to submit the form by hitting the enter key in a textbox. You could also leave one submit button as the default submit functionality, and use regular button inputs for the others and submit the form programatically.
The obvious short-fall of this is that the users would require JavaScript to be enabled. If this isn't a problem this is a consideration for you.
EDIT:
Here, I tried to make an example for you using jQuery (the same functionality can easily be created without jQuery)... let me know if this helps...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Untitled</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ $("#f input").filter(":text").keydown( function(event) { if (event.keyCode==13) { $(this).nextAll().eq(0).click(); } }); }); //--></script> </head> <body> <form name="f" id="f"> <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br /> <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br /> <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br /> </form> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
