I have a page in which a set of text boxes are created based on number of items being shipped:
<c:forEach var="num" begin="1" end="${qtyToShip}" step="1" varStatus ="status">
<tr>
<td>
<input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />
</td>
<td>
<input class="form-med" type="text" name="shipItems[${num - 1 }].shipCompanyBarCode" onkeyup="if (!(event.keyCode==16 || (event.keyCode==9 && event.shiftKey))) {UPSStep2Validate(this);}"/>
</td>
</tr>
</c:forEach>
Here is what I would like to happen. When a user enters in a bar code, I need to make a AJAX call to validate that the bar code is valid (is available to be used, is correct for what is being shipped and has not already been used on this order – prevent duplicate scan).
Using DWR for AJAX and that service is all working fine.
The issue is that if the validation fails I would like the focus to return back to the field in question. That is not happening. The focus is always going to the next input box.
I have tried to work with different events: change, blur, keyup etc. I have tried with placing the focus inline, in the javascript, have tried with jQuery, javascript etc but no luck.
Looking for suggestions/solutions on how to place the focus back to the input box that is causing the issue.
Because of the nature of AJAX, the original approach is invalid. That is
can not be done. The solution I came up with is this
And then in the javascript function that is making the ajax call, if an error happens there then that has the control of setting focus.