Sorry, I am a beginner. I have some problem about ajax post data from while loop PHP. Here is my code.
Assume that after while loop I have 5 records 5 buttons with different post data each record, but ajax will send only first data of record no matter I click which button in these 5 records ajax will send the same data of first record data
But, if I use $(this).val() ajax will send right data in each records.
Pls help. thx so much.
In PHP.
<?php while($rs = mysql_fetch_array($qr)) { ?>
<td width="150">
<input type="text" name="studentid" class="studentid" value="<?=$rs['studentid']?>"/>
</td>
<td width="100">
<select name="ssize" class="ssize">
<option value="">ไซต์</option>
<option <?php if($rs['ssize'] == 'S') { ?> selected="selected" <?php } ?> value="S">S</option>
<option <?php if($rs['ssize'] == 'M') { ?> selected="selected" <?php } ?> value="M">M</option>
</select>
</td>
<button value="<?=$rs['id']?>" class="printBill btn btn-primary">
<i class="glyphicon glyphicon-duplicate"> </i>
พิมพ์ใบเสร็จ
</button>
<?php } ?>
In JS.
$(".printBill").click(function () {
$.ajax({
url: "admin_search_save.php",
data: {
id:$(this).val(),
studentid:$(".studentid").val(),
ssize:$(".ssize").val(),
},
success: function (data) {
}
});
});
You need to use event delegation for dynamically added content.
$(document).on('click','.printBill',function () {
// capture input and select value by traversing up into parent(tr),
// then find element [input, select]
// this traversing method depend on your table structure
var studID = $(this).closest('tr').find('input[name=studentid]').val(),
ssizeData = $(this).closest('tr').find('select[name=ssize]').val();
$.ajax({
url: "admin_search_save.php",
data: {
id : $(this).val(),
studentid : studID,
ssize : ssizeData,
},
success: function (data) {
}
});
});