<p>Let's say you create a wizard in an HTML form. One button goes back, and one goes forward. Since the <em>back</em> button appears first in the markup when you press <kbd>Enter</kbd>, it will use that button to submit the form.</p>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;!-- Put your cursor in this field and press Enter --&gt;
  &lt;input type="text" name="field1" /&gt;

  &lt;!-- This is the button that will submit --&gt;
  &lt;input type="submit" name="prev" value="Previous Page" /&gt;

  &lt;!-- But this is the button that I WANT to submit --&gt;
  &lt;input type="submit" name="next" value="Next Page" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>I would like to get to decide which button is used to submit the form when a user presses <kbd>Enter</kbd>. That way, when you press <kbd>Enter</kbd> the wizard will move to the next page, not the previous. Do you have to use <code>tabindex</code> to do this?</p>

[{'answer_id': 56, 'author': 'huseyint', 'author_id': 39, 'author_profile': 'https://Stackoverflow.com/users/39', 'pm_score': 6, 'selected': False, 'text': '<p>Give your submit buttons the same name like this:</p>\n\n<pre><code>&lt;input type="submit" name="submitButton" value="Previous Page" /&gt;\n&lt;input type="submit" name="submitButton" value="Next Page" /&gt;\n</code></pre>\n\n<p>When the user presses <kbd>Enter</kbd> and the <em>request</em> goes to the server, you can check the value for <code>submitButton</code> on your server-side code which contains a collection of form <code>name/value</code> pairs. For example, in <a href="http://en.wikipedia.org/wiki/Active_Server_Pages" rel="noreferrer">ASP Classic</a>:</p>\n\n<pre class="lang-vb prettyprint-override"><code>If Request.Form("submitButton") = "Previous Page" Then\n    \' Code for the previous page\nElseIf Request.Form("submitButton") = "Next Page" Then\n    \' Code for the next page\nEnd If\n</code></pre>\n\n<p>Reference: <em><a href="http://www.chami.com/tips/internet/042599I.html" rel="noreferrer">Using multiple submit buttons on a single form</a></em></p>\n'}, {'answer_id': 58, 'author': 'Wally Lawless', 'author_id': 37, 'author_profile': 'https://Stackoverflow.com/users/37', 'pm_score': 6, 'selected': False, 'text': '<p>Change the previous button type into a button like this:  </p>\n\n<pre><code>&lt;input type="button" name="prev" value="Previous Page" /&gt;\n</code></pre>\n\n<p>Now the <em>Next</em> button would be the default, plus you could also add the <code>default</code> attribute to it so that your browser will highlight it like so:</p>\n\n<pre><code>&lt;input type="submit" name="next" value="Next Page" default /&gt;\n</code></pre>\n'}, {'answer_id': 411, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': 5, 'selected': False, 'text': '<p>If the fact that the first button is used by default is consistent across browsers, put them the right way around in the source code, and then use CSS to switch their apparent positions.</p>\n\n<p><code>float</code> them left and right to switch them around visually, for example.</p>\n'}, {'answer_id': 679, 'author': 'Yaakov Ellis', 'author_id': 51, 'author_profile': 'https://Stackoverflow.com/users/51', 'pm_score': 4, 'selected': False, 'text': '<p>I would use JavaScript to submit the form. The function would be triggered by the OnKeyPress event of the form element and would detect whether the <kbd>Enter</kbd> key was selected. If this is the case, it will submit the form.</p>\n\n<p>Here are two pages that give techniques on how to do this: <a href="http://www.htmlcodetutorial.com/forms/index_famsupp_157.html" rel="nofollow noreferrer">1</a>, <a href="http://www.java2s.com/Code/JavaScript/Form-Control/SubmitaformViaEnter.htm" rel="nofollow noreferrer">2</a>. Based on these, here is an example of usage (based on <a href="http://www.htmlcodetutorial.com/forms/index_famsupp_157.html" rel="nofollow noreferrer">here</a>):</p>\n\n<pre><code>&lt;SCRIPT TYPE="text/javascript"&gt;//&lt;!--\nfunction submitenter(myfield,e) {\n  var keycode;\n  if (window.event) {\n    keycode = window.event.keyCode;\n  } else if (e) {\n    keycode = e.which;\n  } else {\n    return true;\n  }\n\n  if (keycode == 13) {\n    myfield.form.submit();\n    return false;\n  } else {\n    return true;\n  }\n}\n//--&gt;&lt;/SCRIPT&gt;\n\n&lt;INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" /&gt;\n</code></pre>\n'}, {'answer_id': 2452, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': -1, 'selected': False, 'text': '<p>Using the example you gave:</p>\n\n<pre><code>&lt;form&gt;\n    &lt;input type="text" name="field1" /&gt;&lt;!-- Put your cursor in this field and press Enter --&gt;\n    &lt;input type="submit" name="prev" value="Previous Page" /&gt; &lt;!-- This is the button that will submit --&gt;\n    &lt;input type="submit" name="next" value="Next Page" /&gt; &lt;!-- But this is the button that I WANT to submit --&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>If you click on "Previous Page", only the value of "prev" will be submitted. If you click on "Next Page" only the value of "next" will be submitted.</p>\n\n<p>If however, you press <kbd>Enter</kbd> somewhere on the form, neither "prev" nor "next" will be submitted.</p>\n\n<p>So using pseudocode you could do the following:</p>\n\n<pre><code>If "prev" submitted then\n    Previous Page was click\nElse If "next" submitted then\n    Next Page was click\nElse\n    No button was click\n</code></pre>\n'}, {'answer_id': 27368, 'author': 'Scott Gottreu', 'author_id': 2863, 'author_profile': 'https://Stackoverflow.com/users/2863', 'pm_score': 4, 'selected': False, 'text': '<p>If you really just want it to work like an install dialog, just give focus to the "Next" button OnLoad.  </p>\n\n<p>That way if the user hits <kbd>Return</kbd>, the form submits and goes forward. If they want to go back they can hit <kbd>Tab</kbd> or click on the button.</p>\n'}, {'answer_id': 27372, 'author': 'FlySwat', 'author_id': 1965, 'author_profile': 'https://Stackoverflow.com/users/1965', 'pm_score': 4, 'selected': False, 'text': '<p>This cannot be done with pure HTML. You must rely on JavaScript for this trick.</p>\n\n<p>However, if you place two forms on the HTML page you can do this.</p>\n\n<p>Form1 would have the previous button.</p>\n\n<p>Form2 would have any user inputs + the next button.</p>\n\n<p>When the user presses <kbd>Enter</kbd> in Form2, the Next submit button would fire.</p>\n'}, {'answer_id': 31910, 'author': 'palotasb', 'author_id': 3063, 'author_profile': 'https://Stackoverflow.com/users/3063', 'pm_score': 8, 'selected': True, 'text': '<p>I\'m just doing the trick of <code>float</code>ing the buttons to the right.</p>\n<p>This way the <code>Prev</code> button is left of the <code>Next</code> button, but the <code>Next</code> comes first in the HTML structure:</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.f {\n  float: right;\n}\n.clr {\n  clear: both;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="action" method="get"&gt;\n  &lt;input type="text" name="abc"&gt;\n  &lt;div id="buttons"&gt;\n    &lt;input type="submit" class="f" name="next" value="Next"&gt;\n    &lt;input type="submit" class="f" name="prev" value="Prev"&gt;\n    &lt;div class="clr"&gt;&lt;/div&gt;&lt;!-- This div prevents later elements from floating with the buttons. Keeps them \'inside\' div#buttons --&gt;\n  &lt;/div&gt;\n&lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>Benefits over other suggestions: no JavaScript code, accessible, and both buttons remain <code>type=&quot;submit&quot;</code>.</p>\n'}, {'answer_id': 71322, 'author': 'Jolyon', 'author_id': 11740, 'author_profile': 'https://Stackoverflow.com/users/11740', 'pm_score': 4, 'selected': False, 'text': '<p>This works without JavaScript or CSS in most browsers:</p>\n\n<pre><code>&lt;form&gt;\n    &lt;p&gt;&lt;input type="text" name="field1" /&gt;&lt;/p&gt;\n    &lt;p&gt;&lt;a href="previous.html"&gt;\n    &lt;button type="button"&gt;Previous Page&lt;/button&gt;&lt;/a&gt;\n    &lt;button type="submit"&gt;Next Page&lt;/button&gt;&lt;/p&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>Firefox, Opera, Safari, and Google Chrome all work. <br/> As always, Internet&nbsp;Explorer is the problem.</p>\n\n<p>This version works when JavaScript is turned on:</p>\n\n<pre><code>&lt;form&gt;\n    &lt;p&gt;&lt;input type="text" name="field1" /&gt;&lt;/p&gt;\n    &lt;p&gt;&lt;a href="previous.html"&gt;\n    &lt;button type="button" onclick="window.location=\'previous.html\'"&gt;Previous Page&lt;/button&gt;&lt;/a&gt;\n    &lt;button type="submit"&gt;Next Page&lt;/button&gt;&lt;/p&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>So the flaw in this solution is:</p>\n\n<p>Previous Page does not work if you use Internet&nbsp;Explorer with JavaScript off.</p>\n\n<p>Mind you, the back button still works!</p>\n'}, {'answer_id': 71629, 'author': 'Chris James', 'author_id': 3193, 'author_profile': 'https://Stackoverflow.com/users/3193', 'pm_score': 4, 'selected': False, 'text': '<p>You can do it with CSS.</p>\n\n<p>Put the buttons in the markup with the <code>Next</code> button first, then the <code>Prev</code> button afterwards.</p>\n\n<p>Then use CSS to position them to appear the way you want.</p>\n'}, {'answer_id': 10894669, 'author': 'jayu', 'author_id': 1427636, 'author_profile': 'https://Stackoverflow.com/users/1427636', 'pm_score': 3, 'selected': False, 'text': '<pre><code>&lt;input type=&quot;submit&quot; name=&quot;prev&quot; value=&quot;Previous Page&quot;&gt; \n&lt;input type=&quot;submit&quot; name=&quot;prev&quot; value=&quot;Next Page&quot;&gt; \n</code></pre>\n<p>Keep the name of all submit buttons the same: &quot;prev&quot;.</p>\n<p>The only difference is the <code>value</code> attribute with unique values. When we create the script, these unique values will help us to figure out which of the submit buttons was pressed.</p>\n<p>And write the following coding:</p>\n<pre><code>    btnID = &quot;&quot;\nif Request.Form(&quot;prev&quot;) = &quot;Previous Page&quot; then\n    btnID = &quot;1&quot;\nelse if Request.Form(&quot;prev&quot;) = &quot;Next Page&quot; then\n    btnID = &quot;2&quot;\nend if\n</code></pre>\n'}, {'answer_id': 13084655, 'author': 'netiul', 'author_id': 669073, 'author_profile': 'https://Stackoverflow.com/users/669073', 'pm_score': 5, 'selected': False, 'text': '<p>Sometimes the provided <a href="https://stackoverflow.com/questions/48/multiple-submit-buttons-in-an-html-form/31910#31910">solution by palotasb</a> is not sufficient. There are use cases where for example a &quot;Filter&quot; submits button is placed above buttons like &quot;Next and Previous&quot;. I found a workaround for this: <em>copy</em> the submit button which needs to act as the default submit button in a hidden div and place it inside the form above any other submit button.</p>\n<p>Technically it will be submitted by a different button when pressing Enter than when clicking on the visible Next button. But since the name and value are the same, there\'s no difference in the result.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\n&lt;head&gt;\n    &lt;style&gt;\n        div.defaultsubmitbutton {\n            display: none;\n        }\n    &lt;/style&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;form action="action" method="get"&gt;\n        &lt;div class="defaultsubmitbutton"&gt;\n            &lt;input type="submit" name="next" value="Next"&gt;\n        &lt;/div&gt;\n        &lt;p&gt;&lt;input type="text" name="filter"&gt;&lt;input type="submit" value="Filter"&gt;&lt;/p&gt;\n        &lt;p&gt;Filtered results&lt;/p&gt;\n        &lt;input type="radio" name="choice" value="1"&gt;Filtered result 1\n        &lt;input type="radio" name="choice" value="2"&gt;Filtered result 2\n        &lt;input type="radio" name="choice" value="3"&gt;Filtered result 3\n        &lt;div&gt;\n            &lt;input type="submit" name="prev" value="Prev"&gt;\n            &lt;input type="submit" name="next" value="Next"&gt;\n        &lt;/div&gt;\n    &lt;/form&gt;\n&lt;/body&gt;\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 13594316, 'author': 'Kenny Johnson', 'author_id': 1830173, 'author_profile': 'https://Stackoverflow.com/users/1830173', 'pm_score': 4, 'selected': False, 'text': '<p>Changing the tab order should be all it takes to accomplish this. Keep it simple. </p>\n\n<p>Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button. </p>\n'}, {'answer_id': 22139927, 'author': 'Samuel Mugisha', 'author_id': 1223431, 'author_profile': 'https://Stackoverflow.com/users/1223431', 'pm_score': 3, 'selected': False, 'text': '<p>This is what I have tried out:</p>\n\n<ol>\n<li>You need to make sure you give your buttons different names</li>\n<li>Write an <code>if</code> statement that will do the required action if either button is clicked.</li>\n</ol>\n\n<p>&nbsp;</p>\n\n<pre><code>&lt;form&gt;\n    &lt;input type="text" name="field1" /&gt; &lt;!-- Put your cursor in this field and press Enter --&gt;\n\n    &lt;input type="submit" name="prev" value="Previous Page" /&gt; &lt;!-- This is the button that will submit --&gt;\n    &lt;input type="submit" name="next" value="Next Page" /&gt; &lt;!-- But this is the button that I WANT to submit --&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>In PHP,</p>\n\n<pre><code>if(isset($_POST[\'prev\']))\n{\n    header("Location: previous.html");\n    die();\n}\n\nif(isset($_POST[\'next\']))\n{\n    header("Location: next.html");\n    die();\n}\n</code></pre>\n'}, {'answer_id': 22408408, 'author': 'user1591131', 'author_id': 1591131, 'author_profile': 'https://Stackoverflow.com/users/1591131', 'pm_score': 4, 'selected': False, 'text': '<p>If you have multiple active buttons on one page then you can do something like this:</p>\n\n<p>Mark the first button you want to trigger on the <kbd>Enter</kbd> keypress as the default button on the form. For the second button, associate it to the <kbd>Backspace</kbd> button on the keyboard. The <kbd>Backspace</kbd> eventcode is 8.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("keydown", function(event) {\r\n  if (event.which.toString() == "8") {\r\n    var findActiveElementsClosestForm = $(document.activeElement).closest("form");\r\n\r\n    if (findActiveElementsClosestForm &amp;&amp; findActiveElementsClosestForm.length) {\r\n      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");\r\n    }\r\n  }\r\n});</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"&gt;&lt;/script&gt;\r\n\r\n&lt;form action="action" method="get" defaultbutton="TriggerOnEnter"&gt;\r\n  &lt;input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" /&gt;\r\n  &lt;input type="submit" id=\'TriggerOnEnter\' name="next" value="Next" class="primary_button" /&gt;\r\n&lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 26365211, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': '<p>Another simple option would be to put the back button after the submit button in the HTML code, but float it to the left, so it appears on the page before the submit button.</p>\n\n<p>Changing the tab order should be all it takes to accomplish this. Keep it simple.</p>\n'}, {'answer_id': 29322619, 'author': 'nikkypx', 'author_id': 1395009, 'author_profile': 'https://Stackoverflow.com/users/1395009', 'pm_score': 3, 'selected': False, 'text': '<p>From <a href="https://html.spec.whatwg.org/multipage/forms.html#implicit-submission">https://html.spec.whatwg.org/multipage/forms.html#implicit-submission</a></p>\n\n<blockquote>\n  <p>A form element\'s default button is the first submit button in tree\n  order whose form owner is that form element.</p>\n  \n  <p>If the user agent supports letting the user submit a form implicitly\n  (for example, on some platforms hitting the "enter" key while a text\n  field is focused implicitly submits the form)...</p>\n</blockquote>\n\n<p>Having the next input be type="submit" and changing the previous input to type="button" should give the desired default behavior.</p>\n\n<pre><code>&lt;form&gt;\n   &lt;input type="text" name="field1" /&gt; &lt;!-- put your cursor in this field and press Enter --&gt;\n\n   &lt;input type="button" name="prev" value="Previous Page" /&gt; &lt;!-- This is the button that will submit --&gt;\n   &lt;input type="submit" name="next" value="Next Page" /&gt; &lt;!-- But this is the button that I WANT to submit --&gt;\n&lt;/form&gt;\n</code></pre>\n'}, {'answer_id': 32007399, 'author': 'GuillaumeS', 'author_id': 1448969, 'author_profile': 'https://Stackoverflow.com/users/1448969', 'pm_score': 3, 'selected': False, 'text': '<p>With JavaScript (here jQuery), you can disable the prev button before submitting the form.</p>\n\n<pre><code>$(\'form\').on(\'keypress\', function(event) {\n    if (event.which == 13) {\n        $(\'input[name="prev"]\').prop(\'type\', \'button\');\n    }\n});\n</code></pre>\n'}, {'answer_id': 32377058, 'author': 'MiddleAgedMutantNinjaProgrammer', 'author_id': 832919, 'author_profile': 'https://Stackoverflow.com/users/832919', 'pm_score': 3, 'selected': False, 'text': '<p>The first time I came up against this, I came up with an onclick()/JavaScript hack when choices are not prev/next   that I still like for its simplicity. It goes like this:</p>\n\n<pre><code>@model myApp.Models.myModel\n\n&lt;script type="text/javascript"&gt;\n    function doOperation(op) {\n        document.getElementById("OperationId").innerText = op;\n        // you could also use Ajax to reference the element.\n    }\n&lt;/script&gt;\n\n&lt;form&gt;\n  &lt;input type="text" id = "TextFieldId" name="TextField" value="" /&gt;\n  &lt;input type="hidden" id="OperationId" name="Operation" value="" /&gt;\n  &lt;input type="submit" name="write" value="Write" onclick=\'doOperation("Write")\'/&gt;\n  &lt;input type="submit" name="read" value="Read" onclick=\'doOperation("Read")\'/&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>When either submit button is clicked, it stores the desired operation in a hidden field (which is a string field included in the model the form is associated with) and submits the form to the Controller, which does all the deciding. In the Controller, you simply write:</p>\n\n<pre><code>// Do operation according to which submit button was clicked\n// based on the contents of the hidden Operation field.\nif (myModel.Operation == "Read")\n{\n     // Do read logic\n}\nelse if (myModel.Operation == "Write")\n{\n     // Do write logic\n}\nelse\n{\n     // Do error logic\n}\n</code></pre>\n\n<p>You can also tighten this up slightly using numeric operation codes to avoid the string parsing, but unless you play with enumerations, the code is less readable, modifiable, and self-documenting and the parsing is trivial, anyway.</p>\n'}, {'answer_id': 36206414, 'author': 'Barry Franklin', 'author_id': 680563, 'author_profile': 'https://Stackoverflow.com/users/680563', 'pm_score': 3, 'selected': False, 'text': '<p>I came across this question when trying to find an answer to basically the same thing, only with ASP.NET  controls, when I figured out that the ASP button has a property called <code>UseSubmitBehavior</code> that allows you to set which one does the submitting.</p>\n\n<pre><code>&lt;asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" /&gt;\n</code></pre>\n\n<p>Just in case someone is looking for the ASP.NET button way to do it.</p>\n'}, {'answer_id': 48171459, 'author': 'riskop', 'author_id': 3760049, 'author_profile': 'https://Stackoverflow.com/users/3760049', 'pm_score': 2, 'selected': False, 'text': '<p>I solved a very similar problem in this way:</p>\n\n<ol>\n<li><p>If JavaScript is enabled (in most cases nowadays) then all the submit buttons are "<strong>degraded</strong>" to buttons at page load via JavaScript (jQuery). Click events on the "<strong>degraded</strong>" button typed buttons are also handled via JavaScript.</p></li>\n<li><p>If JavaScript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting <kbd>Enter</kbd> on a <code>textfield</code> within the form will submit the form with the first button instead of the intended <strong>default</strong>, but at least the form is still usable: you can submit with both the <strong>prev</strong> and <strong>next</strong> buttons.</p></li>\n</ol>\n\n<p>Working example:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;\r\n    &lt;/head&gt;\r\n\r\n    &lt;body&gt;\r\n        &lt;form action="http://httpbin.org/post" method="post"&gt;\r\n            If JavaScript  is disabled, then you CAN submit the form\r\n            with button1, button2 or button3.\r\n\r\n            If you press enter on a text field, then the form is\r\n            submitted with the first submit button.\r\n\r\n            If JavaScript is enabled, then the submit typed buttons\r\n            without the \'defaultSubmitButton\' style are converted\r\n            to button typed buttons.\r\n\r\n            If you press Enter on a text field, then the form is\r\n            submitted with the only submit button\r\n            (the one with class defaultSubmitButton)\r\n\r\n            If you click on any other button in the form, then the\r\n            form is submitted with that button\'s value.\r\n\r\n            &lt;br /&gt;\r\n\r\n            &lt;input type="text" name="text1" &gt;&lt;/input&gt;\r\n            &lt;button type="submit" name="action" value="button1" &gt;button 1&lt;/button&gt;\r\n            &lt;br /&gt;\r\n\r\n            &lt;input type="text" name="text2" &gt;&lt;/input&gt;\r\n            &lt;button type="submit" name="action" value="button2" &gt;button 2&lt;/button&gt;\r\n            &lt;br /&gt;\r\n\r\n            &lt;input type="text" name="text3" &gt;&lt;/input&gt;\r\n            &lt;button class="defaultSubmitButton" type="submit" name="action" value="button3" &gt;default button&lt;/button&gt;\r\n        &lt;/form&gt;\r\n\r\n        &lt;script&gt;\r\n            $(document).ready(function(){\r\n\r\n                /* Change submit typed buttons without the \'defaultSubmitButton\'\r\n                   style to button typed buttons */\r\n                $(\'form button[type=submit]\').not(\'.defaultSubmitButton\').each(function(){\r\n                    $(this).attr(\'type\', \'button\');\r\n                });\r\n\r\n                /* Clicking on button typed buttons results in:\r\n                   1. Setting the form\'s submit button\'s value to\r\n                      the clicked button\'s value,\r\n                   2. Clicking on the form\'s submit button */\r\n                $(\'form button[type=button]\').click(function( event ){\r\n                    var form = event.target.closest(\'form\');\r\n                    var submit = $("button[type=\'submit\']",form).first();\r\n                    submit.val(event.target.value);\r\n                    submit.click();\r\n                });\r\n            });\r\n        &lt;/script&gt;\r\n    &lt;/body&gt;\r\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 50015400, 'author': 'Jyoti mishra', 'author_id': 4890885, 'author_profile': 'https://Stackoverflow.com/users/4890885', 'pm_score': 1, 'selected': False, 'text': '<p>You can use <code>Tabindex</code> to solve this issue. Also changing the order of the buttons would be a more efficient way to achieve this.</p>\n\n<p>Change the order of the buttons and add <code>float</code> values to assign them the desired position you want to show in your <code>HTML</code> view.</p>\n'}, {'answer_id': 65239408, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': "<p>Instead of struggling with multiple submits, JavaScript or anything like that to do some previous/next stuff, an alternative would be to use a carousel to simulate the different pages.\nDoing this :</p>\n<ul>\n<li>You don't need multiple buttons, inputs or submits to do the previous/next thing, you have only one <code>input type=&quot;submit&quot;</code> in only one <code>form</code>.</li>\n<li>The values in the whole form are there until the form is submitted.</li>\n<li>The user can go to any previous page and any next page flawlessly to modify the values.</li>\n</ul>\n<p>Example using Bootstrap 5.0.0 :</p>\n<pre><code>&lt;div id=&quot;carousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;\n    &lt;form action=&quot;index.php&quot; method=&quot;post&quot; class=&quot;carousel-inner&quot;&gt;\n        &lt;div class=&quot;carousel-item active&quot;&gt;\n            &lt;input type=&quot;text&quot; name=&quot;lastname&quot; placeholder=&quot;Lastname&quot;/&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;carousel-item&quot;&gt;\n            &lt;input type=&quot;text&quot; name=&quot;firstname&quot; placeholder=&quot;Firstname&quot;/&gt;\n        &lt;/div&gt;\n        &lt;div class=&quot;carousel-item&quot;&gt;\n            &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Submit&quot;/&gt;\n        &lt;/div&gt;\n    &lt;/form&gt;\n    &lt;a class=&quot;btn-secondary&quot; href=&quot;#carousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;Previous page&lt;/a&gt;\n    &lt;a class=&quot;btn-primary&quot; href=&quot;#carousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;Next page&lt;/a&gt;\n&lt;/div&gt;\n</code></pre>\n"}, {'answer_id': 65548916, 'author': 'Prince Owen', 'author_id': 8058709, 'author_profile': 'https://Stackoverflow.com/users/8058709', 'pm_score': -1, 'selected': False, 'text': "<p>When a button is clicked with a mouse (and hopefully by touch), it records the X,Y coordinates. This is not the case when it is invoked by a form, and these values are normally zero.</p>\n<p>So you can do something like this:</p>\n<pre><code>function(e) {\n  const isArtificial = e.screenX === 0 &amp;&amp; e.screenY === 0\n    &amp;&amp; e.x === 0 &amp;&amp; e.y === 0\n    &amp;&amp; e.clientX === 0 &amp;&amp; e.clientY === 0;\n\n    if (isArtificial) {\n      return; // DO NOTHING\n    } else {\n      // OPTIONAL: Don't submit the form when clicked\n      // e.preventDefault();\n      // e.stopPropagation();\n    }\n\n    // ...Natural code goes here\n}\n</code></pre>\n"}, {'answer_id': 65612020, 'author': 'Ajay Patidar', 'author_id': 5340811, 'author_profile': 'https://Stackoverflow.com/users/5340811', 'pm_score': 0, 'selected': False, 'text': "<p>I think this is an easy solution for this. Change the <em>Previous</em> button <code>type</code> to <code>button</code>, and add a new <code>onclick</code> attribute to the button with value <code>jQuery(this).attr('type','submit');</code>.</p>\n<p>So, when the user clicks on the <em>Previous</em> button then its <code>type</code> will be changed to <code>submit</code> and the form will be submitted with the <em>Previous</em> button.</p>\n<pre><code>&lt;form&gt;\n  &lt;!-- Put your cursor in this field and press Enter --&gt;\n  &lt;input type=&quot;text&quot; name=&quot;field1&quot; /&gt;\n\n  &lt;!-- This is the button that will submit --&gt;\n  &lt;input type=&quot;button&quot; onclick=&quot;jQuery(this).attr('type','submit');&quot; name=&quot;prev&quot; value=&quot;Previous Page&quot; /&gt;\n\n  &lt;!-- But this is the button that I WANT to submit --&gt;\n  &lt;input type=&quot;submit&quot; name=&quot;next&quot; value=&quot;Next Page&quot; /&gt;\n&lt;/form&gt;\n</code></pre>\n"}, {'answer_id': 68941820, 'author': 'Stoppeye', 'author_id': 14989607, 'author_profile': 'https://Stackoverflow.com/users/14989607', 'pm_score': 1, 'selected': False, 'text': '<p>A maybe somewhat more modern approach over the CSS float method could be a solution using flexbox with the <code>order</code> property on the flex items. It could be something along those lines:</p>\n<pre><code>&lt;div style=&quot;display: flex&quot;&gt;\n  &lt;input type=&quot;submit&quot; name=&quot;next&quot; value=&quot;Next Page&quot; style=&quot;order: 1&quot; /&gt;\n  &lt;input type=&quot;submit&quot; name=&quot;prev&quot; value=&quot;Previous Page&quot; style=&quot;order: 0&quot; /&gt;\n&lt;/div&gt;\n</code></pre>\n<p>Of course it depends on your document structure whether this is a feasible approach or not, but I find flex items much easier to control than floating elements.</p>\n'}, {'answer_id': 72097973, 'author': 'Motine', 'author_id': 4007237, 'author_profile': 'https://Stackoverflow.com/users/4007237', 'pm_score': 0, 'selected': False, 'text': '<p><strong>Problem</strong></p>\n<p>A form may have several submit buttons.\nWhen pressing return in any input, the <em>first</em> submit button is used by the browser.\nHowever, sometimes we want to use a different/later button as default.</p>\n<p><strong>Options</strong></p>\n<ol>\n<li>Add a hidden submit button with the same action first (☹️ duplication)</li>\n<li>Put the desired submit button first in the form and then move it to the correct place via CSS (☹️ may not be feasible, may result in cumbersome styling)</li>\n<li>Change the handling of the return key in all form inputs via JavaScript (☹️ needs javascript)</li>\n</ol>\n<p>None of the options is ideal, so we choose 3. because most browsers have JavaScript enabled.</p>\n<p><strong>Chosen solution</strong></p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>// example implementation\ndocument.addEventListener(\'DOMContentLoaded\', (ev) =&gt; {\n  for (const defaultSubmitInput of document.querySelectorAll(\'[data-default-submit]\')) {\n    for (const formInput of defaultSubmitInput.form.querySelectorAll(\'input\')) {\n      if (formInput.dataset.ignoreDefaultSubmit != undefined) { continue; }\n      formInput.addEventListener(\'keypress\', (ev) =&gt; {\n        if (ev.keyCode == 13) {\n          ev.preventDefault();\n          defaultSubmitInput.click();\n        }\n      })\n    }\n  }\n});</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;!-- example markup --&gt;\n  &lt;form action="https://postman-echo.com/get" method="get"&gt;\n    &lt;input type="text" name="field1"&gt;\n    &lt;input type="submit" name="submit" value="other action"&gt;\n    &lt;input type="submit" name="submit" value="default action" data-default-submit&gt; &lt;!-- this button will be used on return --&gt;\n  &lt;/form&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n<p>It may be useful to be able to remove the enhancement from some inputs. This can be achieved by:</p>\n<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;text&quot; name=&quot;field2&quot; data-ignore-default-submit&gt; &lt;!-- uses browser standard behaviour --&gt;\n</code></pre>\n<p>Here a complete <a href="https://codepen.io/motine/pen/wvyBmxO" rel="nofollow noreferrer">code pen</a>.</p>\n'}]
['https://Stackoverflow.com/questions/48', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/40/']