How to get input text value from specific row using Jquery

Question

Hello all this is the page that i currently building:

When click Submit, I get the text value in the current row and submitted via jquery ajax. There is no problem for me, but when is I test in another pc in the network there are error message appear (via json). Something like the annual leave and sick leave is undefined.

Example of error in other pc that i tested:

This is the code that i use:

function popUpReasonApplyLeave(){
$('a.submit').bind('click', function(e) {
    e.preventDefault();
    //get the tr row id you have clicked
    var trid =  $(this).closest('tr').attr('id');       
    $('#pop_up_apply_leaveReason').show();
    submitReason(trid);
    //when submit call the ajax function here
});

}

The data in the ajax function

data : {
    idstaff : trid,
    annualleave : $('#'+trid+' input#annualleave').val(),
    sickleave : $('#'+trid+' input#sickleave').val(),
    reason : $('#reason').val(),
}

The html table code

<?php foreach($list as $value) {?>

    <tr id='staffID_<?php echo $value['IDSTAFFTABLE']; ?>'>
        <td><?php echo $value['FIRSTNAME']; ?> <?php echo $value['LASTNAME']; ?></td>
        <td><?php echo $value['POSITIONNAME']; ?><input type="hidden" id="idstaff" name="idstaff" value="<?php echo $value['IDSTAFFTABLE']; ?>" /></td>
        <td><input type="text" name="annualleave" class="annualleave" value="<?php echo $value['ANNUALLEAVEBALANCE']; ?>" id="annualleave"/></td>
        <td><input type="text" name="sickleave" class="sickleave" value="<?php echo $value['SICKLEAVEBALANCE']; ?>" id="sickleave"/></td>
        <td><a href="#"class="submit">Submit</a></td>            
    </tr>

    <?php } ?>

The ajax code

$.ajax({
beforeSend : function(){ 
$("#submitreason").unbind('click');
},
type: "POST",
async : false,
url: "http://192.168.1.5:83/staging/eleave/application/controller/controller.php?action=doupdateleavecontroller",
dataType: 'json',
data : {
    idstaff : trid,
    annualleave : $('#'+trid+' input#annualleave').val(),
    sickleave : $('#'+trid+' input#sickleave').val(),
    reason : $('#reason').val(),
},
success : function(data) {
    var encoded = $.toJSON(data);             
    var result = $.evalJSON(encoded).msg;
    $('#pop_up_apply_leaveReason').hide();
    alert(result);
    location.reload();

},
error : function(XMLHttpRequest, textStatus, errorThrown) {
    alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
}
}); 

Answer 1

Check whether the id's 'annualleave' or 'sickleave' are really unique. IE cannot handle duplicate ID's as well as Firefox/Chrome.

EDIT: This line of code implies that it is not unique:

$('#'+trid+' input#annualleave').val()

You have an input with id anualleave on each table row. You can only use an id only once, even when jQuery handles it well and selects the correct input. IE is much more strict in this situation and ignores duplicate ID's.

I would advice to use class instead, resulting in:

$('#'+trid+' input.annualleave').val()