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>

Answer 1

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();}
});
}
}

Answer 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();
    }
});

Answer 3

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/