Android and HTML5 Number Input AutoSubmit Behavior

Question

I am writing an web page that has a form with a single zipcode field for estimating shipping and taxes. I would like the form to submit once the user hits the enter key on the numeric keypad.

eg

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
</form>

The current behavior is apparently not obvious enough:

<script>
$(document).ready(function() {
    $('#ZipCode').keyup(function() {
        if($(this).val().length == 5) {
            $(this).closest('form').submit();
        }
    });
    $('#ZipCode').focus(function() {
        $(this).val('');
    });
});
</script>

Ideally I would like the form to autosubmit when the enter key is closed or (if possible) when the soft keyboard is closed by the user. Is there any way to do this using JavaScript in the Android browser?

Answer 1

You could try to add hidden button. This works at least in Chrome. When form has a submit button it is automatically triggered when enter is pressed.

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
    <button type="submit" style="display:none">
</form>

The you can use $("form").submit(function(){ // run when form is submitted }) to implement the submit code.

Answer 2

Put a submit button in the form and the enter key will submit the form naturally.

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
    <input type="submit" value="submit" style="visibility: hidden" /> 
</form>

If you need to validate bind to the form submit event, and perform your necessary validation there.

$('form').submit(function() {
    var invalid = $('#ZipCode').val().length !== 5;
    if(invalid)
        return false
});