javascript - Pressing "Return" in a HTML-Form with multiple Submit-Buttons -

-

let's imagine html-form with 2 submit buttons. 1 of them positioned in upper half of form , less important. other button actual submit button, saves entered data. button positioned @ end of form. 2 buttons trigger different action-urls.

experienced users submit forms pressing "enter" or "return" instead of clicking on according button.

unfortunately, browser first submit-button of current form , use execute form-submit. since in form second button actual submit-button, need tell browser use particular button (or action-url associated it).

i don't link javascript listeners, looking key pressed or that. i'm looking better approach problem. however, javascript or jquery solutions (without keypressed-listerner) welcome.

thank in advance.

you could, theoretically @ least, have 3 submit buttons in form.

button 2 existing 'less-important' button (from halfway down form), button 3 existing 'actual-submit' button existing form.

button 1 should hidden (using css display:none or visibility: hidden) , should perform same function current 'actual-submit.' think it'll still first button found browser, regardless of 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 comments:

i thought hidden buttons disabled default? [md5sum]

a valid point, made mistake of testing in firefox (3.5.7, ubuntu 9.10) before posting, in technique worked1, both. complete xhtml file pasted (below) forms basis of testing subsequently 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: none should prevent button being active part of form (included in result set, , eligible default-button-ness); visibility: hidden should not. both of these cases got wrong browsers. normal way have invisible first submit button position: absolute; , move way off page (eg. left: -4000px). ugly reliable. it's idea change tabindex doesn't interfere in expected form tabbing order.

there are, @ least, 2 points have raise comment. in order:

  1. "the normal way..." unaware there normal way, , presented option possibility achieve aim, in full knowledge there were/are number of better ways, particularly given don't see reason multiple submit buttons on same form.
  2. given latter sentence of above point, i'd make clear don't advocate doing this. @ all. feels ugly, , non-semantic, hack have more 1 submit button, -in op's instance- 1 button apparently not being submit button.
  3. the notion of `position: absolute; left: -4000px;` had occurred me, seemed effect same `visibility: hidden;`, , have innate dislike of `position: absolute;` whatever reason...so went option less objectionable me @ time of writing... =)

i appreciate comment tabindex, though, never gave thought to, @ all.

i'm sorry if sound snippy, it's late, i'm tired...yadda-yadda; i've been testing in various browsers since return home , seems firefox 3.5+ gives same behaviour -reporting 'button one' on both windows xp , ubuntu 9.10, webkit browsers (midori, epiphany, safari , chrome) fail , report 'button two.'

so it's fail-worthy idea display: none; submit button. whereas visibility:hidden @ least works.

  1. by mean hitting 'enter' triggered form-submit event, or click event of first submit button of form, regardless of whether first submit `display: none;` or `visibility: hidden`.

    please aware jquery skills limited, tests employed (i ran @ time try , prevent conflicts occurring in execution, commenting out 1 didn't run @ time, both presented -one, clearly, commented out) may insufficient , non-representative.


Comments

Post a Comment

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

-
this question has answer here: how convert between big-endian , little-endian values in c++? 28 answers i've been looking around how convert big-endian little-endians. didn't find solve problem. seem there's many way can conversion. anyway following code works ok in big-endian system. how should write conversion function work on little-endian system well? this homework, since systems @ school running big-endian system. it's got curious , wanted make work on home computer also #include <iostream> #include <fstream> using namespace std; int main() { ifstream file; file.open("file.bin", ios::in | ios::binary); if(!file) cerr << "not able read" << endl; else { cout << "opened" << endl; int i_var; double d_var; while(!file.eof()) {...
Read more

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

-
i'm trying create application adheres following: no taskbar no console or form window can utilize console.writeline() . (i.e. if executes app command prompt write console.) the problem if create windows form (or wpf) application can have there no taskbar, console or window show up, console.writeline() nothing. if create console app, writes console, can't figure out how hide (and if did hide it, write command prompt window?)... how do this? just create standard console application. callers responsibility hide window caused program (from how run c# console application console hidden ): system.diagnostics.processstartinfo start = new system.diagnostics.processstartinfo(); start.filename = dir + @"\myprocesstostart.exe"; start.windowstyle = system.diagnostics.processwindowstyle.hidden;
Read more

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

-
i'm building website using `django. website have significant users non-english speaking countries. i want know if there technical restrictions on types of characters email address contain. are email addresses allowed contain english alphabets, numbers, "_", "@" , "."? are allowed contain non-english alphabets "é" or "ü"? are allowed contain chinese or japanese or other unicode characters? email address consists of 2 parts local before @ , domain goes after. rules these parts different: for local part can use ascii: latin letters - z - z digits 0 - 9 special characters !#$%&'*+-/=?^_`{|}~ dot ., not first or last, , not in sequence space , "(),:;<>@[] characters allowed restrictions (they allowed inside quoted string, backslash or double-quote must preceded backslash) plus since 2012 can use international characters above u+007f , encoded as utf-8 . domain part more res...
Read more