Make enter apply to sequential form buttons

Question

I have a form with multiple buttons (used to verify each section is complete before making the next section visible and alter the next section based on previous responses). I have also hidden the final submit button until a final verification is done (re-runs all the individual verifications). This way the user can't click to submit until all required fields are complete. However the enter key is still bound to the submit button. I have looked and found some event handler code that will turn off the enter key function(which I don't understand very well) that would prevent early submission of the form, but I would rather tweak that code to transfer the enter key function to each button successively and then finally to the submit button itself. Any ideas?

The example code I found that I can't make sense of:

    <form>
    <label for="age">Age:</label>
    <input type="number" min="0" max="120" name="age" id="age">
    <button id="child">Child</button>
    <button id="adult">Adult</button>
    </form>
    <script>
    (function() {
    var age = document.getElementById('age');
    age.addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            if (age.value > 20) {
                document.getElementById('adult').click();
            } else {
                document.getElementById('child').click();
            }
        }
    });
    }());
    </script>

To help me understand a little better -- you'd like your enter key bound to some buttons throughout the form, depending on the form section the focus is in (for a lack of better words), and then ultimately the final submit button upon successful validation, correct? — JSess, Jun 08 '15 at 18:34
@JSess yes, I would like enter to be bound to button 1 on opening the page, as part of the function associated with button 1 I would like to remove the binding from button 1 and put it on button 2, etc. until it finally reaches the final button which is the submit button. — Joshua Viele, Jun 08 '15 at 18:38

depperm · Answer 1 · 2015-06-08T20:55:46.213

2

For each previous submit form button this may work:

$("#id_of_form").keypress(function(event){
    event.preventDefault();
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

edited Jun 08 '15 at 20:55

answered Jun 08 '15 at 18:32

depperm

10,606
4
43
67

add an `event.preventDefault();` or the form may submit itself prematurely – Dexter Huinda Jun 08 '15 at 18:41
the event.keyCode == 13 is the part I couldn't understand in the above example, the 13 refers to the enter key specifically, and the event is it being pressed? Is there a list of keyCodes I can look up somehwere? – Joshua Viele Jun 08 '15 at 18:42
look for keycodes in this q/a -- http://stackoverflow.com/questions/5603195/what-are-the-javascript-keycodes – Dexter Huinda Jun 08 '15 at 18:45
@JoshuaViele The _event_ is the object given in the `keyup`, which is then passed into the function via `(function(event){`. The _keyCode_ is indeed the `enter/return` key. – JClaspill Jun 08 '15 at 18:45
@depperm Wasn't working for me until I changed keyup to keypress. – Joshua Viele Jun 08 '15 at 20:48

score 0 · Answer 2 · answered Jun 08 '15 at 19:09

Based upon the requirement, I've come up with an example of how I'd approach doing it in this fiddle

I'm disabling buttons which are not the first button, and when an input field has text in it and the user presses the button next to it (in the same section), or if the user hits enter (checking keyCode 13, like @depperm has mentioned), it will look to see if the button is disabled, otherwise, it will replace it with the text entered and add to a variable of the value.

var $button = $('button'),
    $form   = $('form'),
    valStr  = '';

// on button clicks, prevent default action, and fire buttonPress function
$button.click(function (e) {
    e.preventDefault();
    buttonPress($(this).closest('.section'));
});

// when user hits enter key and button is not disabled, click button
$(".section").keyup(function (e) {
    if (e.keyCode == 13) $(this).find('button').click($(this));
});

function buttonPress($section) {
    var thisVal = $section.find('input').val();

    // if the button is not disabled for the section, and the value is not blank
    if (!$section.find('button').attr('disabled') && thisVal !== '') {
        valStr += (thisVal);

        // replace this section HTML with the val string we just added to,
        // then remove the next section's disabled attribute from button
        // if there is no next section, then trigger a submit (or you could enable the submit button for the user to be able to click for form submit)
        $section
            .html('<p>' + valStr + '</p>')
            .next('.section').length ?     $section.next().find('button').removeAttr('disabled') : $form.trigger('submit');
    }
}

Hopefully this is a step in the right direction for you.

** edit, link and syntax error on /1/

score 0 · Answer 3 · answered Jun 08 '15 at 21:09

Ended up mashing a bunch of suggestions I got here together along with some further research that it pointed to.

started out with this at the head of my

    $(document).ready(function() {
    $(window).keypress(function(event){
    if(event.keyCode == 13) {
    $("#dadosTutor").click();
    event.preventDefault();
    return false;
    }
    });
    });

Then added a portion of it to each of my verifications for null inputs:

    if (nullCheck() === 0) {
    alert('Você ainda não tenham completado o preenchimento da tabela Dados do Tutorando. Faz favor, verifique que você respondeu a cada pergunta e submeter mais uma vez.');
} 
else {
    $("#numberProcesso").show();
    $("#numberPatients").show();
    $("#patientProcesso").show();
    $("#dadosTutor").remove();
    //This is what I added
    $(window).keypress(function(event){
    if(event.keyCode == 13) {
   $("#patientProcesso").click();}
});
}
}

Make enter apply to sequential form buttons

3 Answers3