I have a form I can create a new row through jquery. The problem I'm facing is that when I select the product from dropdown it have to set the rate of this product to its next column. The first row does it fine. But when i create the new row and select the product it gives the correct value but sets value on first row's column. I don't know how to set value to corresponding column. Screenshot
As you can see in the picture I select the milk product, it sets the value to next column when I created the new row and select the product it sets value to the first row's column.
code of function which returns the dropdown values of product
function fill_unit_select_box($con)
{
$output = '';
$query = "SELECT * FROM `stock` INNER JOIN product ON stock.product_id = product.product_id
WHERE stock.product_id = product.product_id ORDER BY product_name ASC";
$query1=mysqli_query($con,$query);
while($row=mysqli_fetch_array($query1))
{
$output .= '<option value="'.$row["product_id"].'">'.$row["product_name"].'</option>';
}
return $output;
}
code of form created through jquery
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><select name="item_name[]" onchange="product_id(this)" class="form-control item_name"><option value="">Select Unit</option><?php echo fill_unit_select_box($con); ?></select></td>';
html += '<td><input type="text" disabled name="item_per_unit_price[]" id="product_price" class="form-control item_per_unit_price input" /></td>';
html += '<td><input type="text" name="item_quentity[]" class="form-control item_quentity input" /></td>';
/*html += '<td><input type="text" name="item_total_price[]" class="form-control item_total_price" /></td>';*/
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
code of onchange function which sets the value in price per unit
function product_id(str) {
var id = str.value;
$.ajax({
type : "POST",
url : "stock.php?page=stock_per_unit_price",
data : {
id:id
},
success: function (data) {
console.log(data);
$("#product_price").val(data);
}
});
}
$("#product_price").val(data); I don't know how to set value on same column of different row.
To set the price in the corresponding row, it's necessary to pass a second parameter to your product_id()
function to identify the current row. This could be done like in the following example:
$(document).ready(function() { $(document).on("change", "select", function() { let value = $(this).val(); let row = $(this).closest("tr").index(); product_id(value, row); }); function product_id(value, row) { for (var k in dataset) { if (value == k) { let price = dataset[k]; $("tr:eq(" + row + ")").find(".product_price").val(price) } } } dataset = {"1": "10 €", "2": "20 €"} });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><select> <option value="">Select Unit</option> <option value="1">1</option> <option value="2">2</option> </select></td> <td><input class="product_price"/></td> </tr> <tr> <td><select> <option value="">Select Unit</option> <option value="1">1</option> <option value="2">2</option> </select></td> <td><input class="product_price"/></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.