Numerous send switches in an HTML form

Allow's claim you create a Wizard in an HTML form. One switch returns, and also one moves forward. Given that the back switch shows up first in the markup when you push Enter it will certainly make use of that switch to send the kind.

Instance:

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>
.

What I would love to do, is reach determine which switch is made use of to send the kind when a customer presses Enter. In this way, when you push Enter the Wizard will certainly relocate to the next web page, not the previous. Do you need to make use of tabindex to do this?

0
2019-05-06 23:12:56
Source Share
Answers: 5

Using the instance you offered :

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

If you click "Previous Page" just the value of "prev" will certainly be sent. If you click "Next Page" just the value of "next" will certainly be sent.

If nonetheless, you push enter someplace on the kind, neither "prev" neither "next" will certainly be sent.

So making use of quasi code you can do the adhering to :

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
0
2019-05-10 14:09:56
Source

Give your send switches very same name similar to this :

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

When the customer presses enter and also the Request mosts likely to web server, you can examine the value for submitButton on your web server - side code which has a collection of kind name/value sets. As an example in timeless ASP :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Reference : Using multiple submit buttons on a single form

0
2019-05-08 20:03:45
Source

Would it be feasible for you to transform the previous switch type right into a switch similar to this :

<input type="button" name="prev" value="Previous Page" />

Now the Next switch would certainly be the default, plus you can additionally add the default credit to it to make sure that your internet browser will certainly highlight it thus :

<input type="submit" name="next" value="Next Page" default />

Hope that aids.

0
2019-05-08 19:54:30
Source

I would certainly make use of Javascript to send the kind. The function would certainly be caused by the OnKeyPress occasion of the kind component, and also would certainly identify whether the Enter key was picked. If this holds true, it will certainly send the kind.

Below are 2 web pages that offer strategies on just how to do this : 1, 2. Based upon these, below is an instance of use (based upon here) :

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
0
2019-05-08 13:15:05
Source

If the reality that the first switch is made use of by default corresponds throughout internet browsers, why not place them properly round in the resource code, after that make use of CSS to change their noticeable placements? float them left and also right to change them around aesthetically, as an example.

0
2019-05-07 16:35:10
Source