CODEWITHSUNDEEP
phpjquery
cyberfly
cyberfly

Reputation: 5868

How to get input text value from specific row using Jquery

Hello all this is the page that i currently building:

alt text

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:

alt text

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);
}
});

Upvotes: 1

Views: 2253

Answers (1)

Serkan
Serkan

Reputation: 349

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()

Upvotes: 3

Related Questions