Having two submit buttons

Question

I have two submit buttons, a back submit button and a next submit button, when the user is in a text input and press enter, it takes them backwards... I think this is because enter evokes the back submit button instead of the next submit button.

<form action="" method="post">

    <input type="submit" name="GOTO1" value="back" />

    <input type="text" name="value1" />

    <input type="submit" name="GOTO3" value="next" />

</form>

So when you are instead of the text field, and press enter it executes the first submit button, how can I change that...

Is that all the code? if so I don't see how they will be taken back — Suthan Bala, Nov 21 '13 at 22:43
Forms with a single input are automatically submitted when enter is pressed. In this case, the first button takes the action. — emerson.marini, Nov 21 '13 at 22:43
Create two separate forms with each submit...or you can use jQuery to prevent the default submit, run an IF statement (based on submit value), and then have jQuery execute the submit based on the button clicked. — Mike Barwick, Nov 21 '13 at 22:43

Mike Barwick · Accepted Answer · 2013-11-21T23:05:24.717

1

Go the jQuery route...(untested).

// Prevent default on form on page load
// or on "enter"
$('form').disable();

// OR....

// Disable the ENTER key altogether on the form inputs
$('form').find('.input').keypress(function(e){
   if (e.which == 13) // Enter key is keycode 13
   {
       return false;
   }    
});

$('input[type="submit"]').on('click', function() {
    var btn = $(this).val();

    if(btn == 'back') 
    {
        // do this to go back, code here
    }
    else 
    {
        // do this to go to next, code here
    }
    return false;
});

edited Nov 21 '13 at 23:05

answered Nov 21 '13 at 22:48

Mike Barwick

6,288
6
51
76

1

I feel like disabling it is the best option, since no real solution exists. Thanks! – Arian Faurtosh Nov 21 '13 at 23:11

score 0 · Answer 2 · answered Nov 21 '13 at 22:49

0

very simple workaround

<script>
    function myFunction()
{ 
}
    function myFunction2()
{ 
}
</script>
</head>
<body>
<form action="" method="post">

    <input type="submit" name="GOTO1" value="back" onclick="myFunction2()"/>

    <input type="text" name="value1" />

    <input type="submit" name="GOTO3" value="next" onclick="myFunction()" />

</form>

Not neat but it works on the onclick number reference.

Hope this helps...

answered Nov 21 '13 at 22:49

Black.Jack

1,878
2
22
39

This doesn't dove the problem of when the user presses enter while in the form... – Arian Faurtosh Nov 21 '13 at 22:57
yes, jquery it's always the best, i was trying to remain in the html with a trick :) nice hand Man – Black.Jack Nov 21 '13 at 23:38

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

Use

<input type="button" ... >

You should not have more than one submit per form, since ENTER should trigger it.

To know more about it, you can take a look at this: https://stackoverflow.com/a/469084/955143

edited May 23 '17 at 10:25

Community

1
1

answered Nov 21 '13 at 22:56

Rafareino

2,515
1
19
26

Not a solution to the problem, need to keep in information in the form while the users goes back and forth. – Arian Faurtosh Nov 21 '13 at 22:58

Having two submit buttons

3 Answers3