Trying to add some form control when enter is clicked on an HTML field, getting inconsistent results

Question

I have an HTML form that I'm running with Firefox that looks something like this:

<form name="transfer" id = "transferForm" action='transfer.php' method='POST'>
<div>
    <input id="itemSelect" name="itemSelect"/>
    <input type="number" name="quantity" id="quantity" value="1"
        onkeypress="return isNumberKey(event)"/>
    <input type="button" value="Add" id="addButton" style="width:83px" 
        onclick="addItem()"/>
</div>

<div>
    <span id="myForm"></span>
    <button id='save' name = 'save' style="width:205px">Save</button>
    <button id='transfer' name='transfer' style="width:205px"/>Transfer</button>
</div>
</form>

A few things to note: -itemSelect is a dojo/dijit combobox that is initialized elsewhere. -The function addItem(), found in the addButton, runs some javascript that creates new elements in the span myForm each time the add button is clicked. These are processed by transfer.php when the save or transfer button is clicked.

Everything works fine, but I want to add some user friendly controls so the form can work without mouse clicking. I want the user to be able to press 'Enter' when in the "quantity" field, and have the form run the addItem() javascript and move focus back to "itemSelect".

This is the javascript I added. First, to disable the default submit on enter of the form:

<script language="JavaScript">
    window.addEventListener('keydown',function(e)
        {if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13)
        {if(e.target.nodeName=='INPUT'&&e.target.type=='text')
        {e.preventDefault();return false;}}},true);

Then I add an event listener to "quantity"

    document.getElementById("quantity").addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode == 13) {
            //document.getElementById("addButton").click();
            addItem(); //Same results using this or the line above
            document.getElementById("itemSelect").focus(); //move focus back to the combo box
        }
    }); 
</script>

At first glance it appears to work, however I get two different glitches.

1. With this code in place, if I press enter to run the addItem() function the line gets added on the form between the span tags, but when I click "save" or "transfer" to submit the lines added this way do not not POST. In transfer.php lines that were already added show up (), but any new line added by clicking enter does not go through. However if I just click the "addButton" to add a line instead of pressing enter then it POST's just fine.

2. When I test adding lines with the keyboard, pressing TAB-ENTER-TAB-ENTER..., it works fine but after on about the 4th cycle the form suddenly submits to transfer.php.

So what could be going wrong with #1, and how does #2 happen?

Answer 1

Try the below:

Remove inline event handlers from your HTML
Seperation of concerns

Know the difference between onKeyPress Vs. onKeyUp and onKeyDown
Stackoverflow question

Prevent form submission on enter:

document.getElementById("transferForm").addEventListener("keypress", function (e) {
    e = e || event;
    var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
    return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
})

Call addItem on quantity input enter

document.getElementById("quantity").addEventListener("keypress", function (event) {
    var keyCode = event.keyCode || event.which;
    if (keyCode === 13) {
        event.preventDefault();
        addItem();  // addItem function call
    }
});

call addItem on add button click

document.getElementById("addButton").addEventListener("click", addItem);
function addItem() {
    // addItem code    
}

Mitigate browser inconsistencies with javascript libraries like jQuery
In your code you might have noticed about getting the keycode value using which.

However jQuery normalises event.which depending on whether event.which, event.keyCode or event.charCode is supported by the browser: