Multiple submit buttons in an HTML form

2019-01-03 08:23发布

站内问答 / 移动开发
1028 23 5

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

Example:

<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 like to do, is get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the Wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

23条回答
ゆ 、 Hurt°
2楼-- · 2019-01-03 09:14

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 UseSubmitBehavior that allows you to set which one does the submitting. 

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

Just in case someone is looking for the asp.net button way to do it.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-01-03 09:14

Using the example you gave:

<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 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.

If however, you press enter somewhere on the form, neither "prev" nor "next" will be submitted.

So using pseudo code you could do the following:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2019-01-03 09:15

I solved a very similar problem in this way:

  1. if javascript is enabled (in most cases nowadays) then all the submit buttons are "degraded" to buttons at page load via javascript (jquery). Click events on the "degraded" button typed buttons are handled also via javascript.

  2. if javascript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting enter on a textfield within the form will submit the form with the first button instead of the intended default, but at least the form is still usable: you can submit with both the prev and next buttons.

working example:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <form action="http://httpbin.org/post" method="post">
    If javascript is disabled, then you CAN submit the form with button1, button2 or button3.
    If you press enter on a text field, then the form is submitted with the first submit button.

    If javascript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
    style are converted to button typed buttons.

    If you press enter on a text field, then the form is submitted with the only submit button
    (the one with class defaultSubmitButton)
    If you click on any other button in the form, then the form is submitted with that button's
    value.
    <br />
    <input type="text" name="text1" ></input>
    <button type="submit" name="action" value="button1" >button 1</button>
    <br />
    <input type="text" name="text2" ></input>
    <button type="submit" name="action" value="button2" >button 2</button>
    <br />
    <input type="text" name="text3" ></input>
    <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
    </form>
    <script>
    $(document).ready(function(){

    /* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */
    $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
        $(this).attr('type', 'button');
    });

    /* clicking on button typed buttons results in:
       1. setting the form's submit button's value to the clicked button's value,
       2. clicking on the form's submit button */
    $('form button[type=button]').click(function( event ){
        var form = event.target.closest('form');
        var submit = $("button[type='submit']",form).first();
        submit.val(event.target.value);
        submit.click();
    });

    });
    </script>
    </body>
    </html>

查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-01-03 09:15

Try this..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" 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>

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
6楼-- · 2019-01-03 09:15

You can use Tabindex to solve this issue, Also changing the order of button would be more efficient way to achieve this. Change the order of button and add float values to assign them the desired position you want to show in your HTML view.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)