I am trying to override what happens when a user presses enter on an inner form field. I do not want to disable enter. I want to show a special pop up (bootstrap modal) and prevent form submission when user is updating value by pressing enter on the input field. I, also, still want enter key to try to submit the form when user presses it outside of the input field focus. How do I do this?
Also, what exactly is this doing action="javascript:; Shouldnt it have a function name? Format is ftl.
<form id="tsp_form" class="form-vertical" autocomplete="off" action="javascript:;">
<div class="step2">
<p class="title"><@spring.message "test.step2" /></p>
<div class="provider">
<div class="hideme" id="edit_provider">
<div style="display:inline;">
<input type="text" id="input_field" name="input_field" maxlength="16" value="${(tspProvider!'')?html}" style="display:inline;width:200px;margin-right:5px;" class="form-control" />
<input type="hidden" id="input_field" value="${(tspProvider!'')?html}" />
<button id="edit_provider_submit" type=button class="btn btn-primary lineBtn" style="vertical-align: top;" role="button"><@spring.message "pac.save" /></button>
<button id="edit_provider_cancel" type=button class="btn btn-default cancel lineBtn" style="vertical-align: top;" role="button"><@spring.message "pac.cancel" /></button>
</div>
</div>
</div>
</form>
<input ... onkeydown="return event.key != 'Enter';">
or with JQuery
$('tsp_form:not([type="submit"])').keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}});