I use jQuery successfully to duplicate a first form input field (name=”InvoiceTotal”) to a second form input filed (name=”AmountPaid”) that is readonly. However, IE (I’m using IE8) does not duplicate leaving the second filed empty and as the second field needs to be readonly the user can not enter data themselves.
I use almost identical code to duplicate other fields which works perfectly in IE – the only difference in this alternate code is I uses a check box make it conditional to give the user the option if they wish to duplicate their input.
Any suggestions as to what I am not seeing would be very much appreciated.
$(document).ready(function() {
$('#InvoiceTotal').change(function() {
$('#AmountPaid').val($('#InvoiceTotal').val());
});
});
<input name="InvoiceTotal" type="text" id="InvoiceTotal" />
<input name="AmountPaid" type="text" id="AmountPaid" readonly />
Kept trying and I’ve ended up with a different approach. I started by using the jQuery as a function calling it using “onchange” but again found it didn’t work with IE. After reading many articles and postings about how IE doesn’t handle “onchange” very well I switched to using “onblur”. The solution I found I feel isn’t very clean and could be much better but everything is working even in IE so until I can get back and try code it better it’ll have to do.
Here is the working code in case it can help someone else.