Form with two different submit

Question

I have a form with two different submit buttons. It looks like this:

Button "Ja" pressed - first submit button appears

Code of "Ja" button:

         <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Ticket abschicken</button>
      </div>

Button "Nein" pressed - second submit button appears

Code of "Nein" button:

            <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" name="submitno" id="submitno" class="btn btn-danger">Ticket abschicken</button>
        </div>

When the first submit button is pressed the user should be redirected to submit1.php, when the second submit button is pressed the user should be redirected to submit2.php.

Function that redirects users to submit1/2.php:

$('document').ready(function () {
"use strict";

$(function () {

    var submityesClicked;

    $('#submityes').click(function () {
        submityesClicked = true;
    });
    $('#submitno').click(function () {
        submityesClicked = false;
    });

    $('#webform').submit(function (e) {
        e.preventDefault();//prevent the default action

        $.ajax({
            type: "POST",
        /*url: "process.php", //process to mail
         data: $('form.contact').serialize(),*/
            success: function (msg) {
                window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
            },
            error: function () {
                alert("error");
            }
        });
    });
});

});

The problem I have is the following: Whenever I press the "Enter" on the keyboard the form is submitted with the first submit button. So if I write something in the "Telefonnummer" field (which only appears when the "Nein" button was pressed) and press "Enter" then the form is submitted with the first submit button, even if that one is not even visible.

How can I disable the "Enter" button for the whole form so that it is submitted correctly?

Stack should implement a "Do you have code?" option => Go to Step 1; paste code. If "no code"; show a message. — Funk Forty Niner, Mar 22 '17 at 14:36
you know we are not psychics right? show some code! What have you tried? — Rotimi, Mar 22 '17 at 14:36
You can disable the Enter key in the form : http://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter — Fridez Lucas, Mar 22 '17 at 14:37
It is always better if you show code of your tryouts. Here is a suggestion which might bring you to solution : http://stackoverflow.com/questions/1041247/handle-user-hitting-enter-key-in-a-asp-net-mvc-web-site — Lyubomir Dimov, Mar 22 '17 at 14:37
Make sure these buttons have the `type="button"` attribute to prevent the form from submitting. — node_modules, Mar 22 '17 at 14:38
as per your edit: all you posted was html, no "js/php/jquery" or a "form" for that matter. — Funk Forty Niner, Mar 22 '17 at 14:39
just use AJAX here. Then detect the key pressed before posting your php. — Rotimi, Mar 22 '17 at 14:40

score 1 · Accepted Answer · answered Mar 22 '17 at 14:49

Your best bet would be to utilize AJAX here. Before posting the php script url, check for the key pressed. Then take actions as required. Example:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

score 0 · Answer 2 · answered Mar 22 '17 at 14:40

0

I would change both <input type="submit"> on <button type="button"> related to some function that gains all the data from forms. Button of button type shouldn't be treated like submit.

answered Mar 22 '17 at 14:40

elzoy

5,237
11
40
65

Form with two different submit

2 Answers2