I have a form where my users are asking for the ability to move focus to the next field when the enter key is pressed, instead of submitting the form. To achieve this, I have implemented an onkeypress event handler on the text input field to change the focus when the enter key is pressed.
The issue I am facing is that even though the focus changes as expected, the form still gets submitted as if the enter key was pressed again. I tried returning false in the event handler function to prevent this behavior, but it doesn't seem to work. This problem occurs in both Chrome and Firefox.
I would appreciate any insights into what might be causing this unexpected behavior.
<form action="" name="confirmation" method="post">
<fieldset>
<div class="clearfix">
<label for="id_event_fuel_amount">Quantity:</label>
<div class="input">
<input type="text" id="event_fuel_amount_id" name="event_fuel_amount" onkeypress="keydown(event, 'event_purchase_amount_id')" />
</div>
</div>
<div class="clearfix">
<label for="id_event_purchase_amount">Sale:</label>
<div class="input">
<input type="text" id="event_purchase_amount_id" name="event_purchase_amount" />
</div>
</div>
<input type="hidden" name="state" value="3" id="id_state" />
<input type="hidden" name="time_stamp" value="2011-09-24 14:34:06" id="id_time_stamp" />
<input type="hidden" name="purchase" value="66" id="id_purchase" />
<input type="submit" value="Save"/>
</fieldset>
</form>
<script>
function keydown(e,s){
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (code==13){
document.getElementById(s).focus();
return false;
}
}
</script>