Menu
Let's imagine a HTML-form with with two submit buttons. one of them is positioned in the upper half of the form and does something less important. the other button is the actual submit button, which saves the entered data. this button is positioned at the end of the form. the two buttons will trigger different action-urls.
experienced users like to submit their forms by pressing "enter" or "return" instead of clicking on the according button.
unfortunately, the browser will look for the first submit-button of the current form and use this to execute the form-submit. since in my form the second button is the actual submit-button, i need to tell the browser to use this particular button (or the action-url that is associated with it).
i don't link javascript listeners, which are looking for key pressed or something like that. so i'm looking for a better approach to this problem. however, javascript or jquery solutions (without keypressed-listerner) are welcome.
thank you very much for your help in advance.
413
Let's learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method 'post' and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.
yes, multiple submit buttons can include in the html form. One simple example is given below.
Multiple buttons with different names To display a data entry textboxes EditorForModel() helper is used. You can very well use helpers such as TextBoxFor() and LabelFor() if you so wish. There are two submit buttons - one with name attribute set to save and the other with name of cancel.
onsubmit = function () { if (allowSubmit) allowSubmit = false; else return false; } })(); (well, as sure-fire as you can get with JS enabled anyway). You could disabled the button as a visual confirmation to the end user that the form can only be submit once too. Very correct.
change your first button to a <input type="button" />.
154
You could, theoretically at least, have three submit buttons in your form.
Button two is the existing 'less-important' button (from halfway down the form), button three is the existing 'actual-submit' button from your existing form.
Button one should be hidden (using CSS display:none or visibility: hidden) and should perform exactly the same function as your current 'actual-submit.' I think it'll still be the first button to be found by the browser, regardless of its visibility.
<form method="post" method="whatever.php" enctype="form/multipart"> <fieldset id="first"> <label>...<input /> <label>...<input /> <label>...<input /> <input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> /> <input class="less_important" type="submit" value="submit" /> </fieldset> <fieldset id="second"> <label>...<input /> <label>...<input /> <label>...<input /> <input type="submit" value="submit" class="actual_submit" /> </fieldset> </form> Edited in response to comments:
I thought hidden buttons were also disabled by default? [md5sum]
A valid point, but I made the mistake of testing only in Firefox (3.5.7, Ubuntu 9.10) before posting, in which the technique worked1, for both. The complete xhtml file is pasted (below) that forms the basis of my testing subsequently to these comments.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>3button form</title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready( function() { $('input[type="submit"]').click( function(e){ alert("button " + $(this).attr("name")); } ); } ); </script> </head> <body> <form method="post" method="whatever.php" enctype="form/multipart"> <fieldset id="first"> <label>...<input /> <label>...<input /> <label>...<input /> <input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> <input name="two" class="less_important" type="submit" value="submit" /> </fieldset> <fieldset id="second"> <label>...<input /> <label>...<input /> <label>...<input /> <input name="three" type="submit" value="submit" class="actual_submit" /> </fieldset> </form> </body> </html>
display: noneshould prevent a button from being an active part of the form (included in the result set, and eligible for default-button-ness);visibility: hiddenshould not. However both of these cases are got wrong by some browsers. The normal way to have an invisible first submit button is toposition: absolute;it and move it way off the page (eg. with left: -4000px). This is ugly but reliable. It's also a good idea to change its tabindex so it doesn't interfere in the expected form tabbing order.
There are, at least, two points I have to raise to this comment. In order:
I appreciate your comment about the tabindex, though, that was something that I never gave any thought to, at all.
I'm sorry if I sound somewhat snippy, it's late, I'm tired...yadda-yadda; I've been testing in various browsers since my return home and it seems that Firefox 3.5+ gives the same behaviour -reporting 'button one' on both Windows XP and Ubuntu 9.10, all Webkit browsers (Midori, Epiphany, Safari and Chrome) fail and report 'button two.'
So it's definitely a fail-worthy idea to display: none; the submit button. Whereas the visibility:hidden at least works.
By which I mean that hitting 'enter' triggered the form-submit event, or the click event of the first submit button of the form, regardless of whether that first submit was `display: none;` or `visibility: hidden`.
Please be aware that my jQuery skills are limited, so the tests employed (I ran only at a time to try and prevent conflicts occurring in execution, commenting out the one I didn't run at that time, both are presented -one, clearly, commented out) may well be insufficient and non-representative.
39
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
