Reputation: 191
I have a html form and whenever enter
is pressed the next field is selected.
here is a code.
$(document).on("keydown","input",function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td>Medical Record No.</td><td><input type="text" name="labNo" /></td>
</tr>
<tr>
<td>Age/sex </td><td><input type="text" name="age" />
<select id="age">
<option value="Year">Year</option>
<option value="Month">Month</option>
</select>
<select id="sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Phone </td>
<td><input type="text" name="" value="-,-" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" id="patBtn" value="Save (S)" accesskey="s" />
<input type="reset" value="Set Default (D)" accesskey="d" />
</td>
</tr>
</table>
</form>
This is not working.
Upvotes: 5
Views: 1453
Reputation: 1246
this should work no matter the html structure
$(document).on("keydown","input",function(event) {
if (event.which === 13 || event.keyCode === 13) {
event.stopPropagation();
event.preventDefault();
var position = $(this).index('input');
$("input").eq(position+1).focus();
}
});
also for select:
$(document).on("keydown, keyup","input, select",function(event) {
if (event.which === 13 || event.keyCode == 13) {
event.stopPropagation();
event.preventDefault();
var position = $(this).index('input, select');
$("input, select").eq(position+1).focus();
}
});
jsfiddle: http://jsfiddle.net/xh0m7pzu/1/
Upvotes: 0
Reputation:
Try following script
$(document).on("keydown","input",function(event) {
debugger;
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).parents("tr").next().find("input").focus();
}
});
Upvotes: 1