Как отобразить цену товара при выборе из выпадающего списка БД при циклировании
Я попытался создать счет для своей корзины покупок. Я выбираю товар из выпадающего списка db as, и если я нажимаю на него, он автоматически выдает мне цену. Это на первом входе выберите опцию. Затем, когда я зацикливаю входную форму выбора опции для остального элемента, (то есть) элемента 2,3,4 и так далее . На нем не было цены. Первый элемент отображается из-за идентификатора, который я использовал в своем jquery. Пожалуйста, я здесь новичок, и мне нужна ваша помощь. Спасибо. Мой код ниже
Что я уже пробовал:
<form method="post" id="invoice_form">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<td colspan="2" align="center"><h2 style="margin-top:10.5px">Create Invoice</h2></td>
</tr>
<tr>
<td colspan="2">
<div class="row">
<div class="col-md-8">
To,<br />
RECEIVER (BILL TO)<br />
<input type="text" name="order_receiver_name" id="order_receiver_name" class="form-control input-sm"
placeholder="Enter Receiver Name" />
<textarea name="order_receiver_address" id="order_receiver_address" class="form-control"
placeholder="Enter Billing Address"></textarea>
</div>
<div class="col-md-4">
Reverse Charge<br />
<input type="text" name="order_no" id="order_no" class="form-control input-sm" placeholder="Enter
Invoice No." />
<input type="text" name="order_date" id="order_date" class="form-control input-sm" readonly
placeholder="Select Invoice Date" />
</div>
</div>
<br />
<table id="invoice-item-table" class="table table-bordered">
<tr>
<th width="7%">Sr No.</th>
<th width="20%">Item Name</th>
<th width="5%">Quantity</th>
<th width="5%">Price</th>
<th width="10%">Actual Amt.</th>
<th width="12.5%" colspan="2">Tax1 (%)</th>
<th width="12.5%" colspan="2">Tax2 (%)</th>
<th width="12.5%" colspan="2">Tax3 (%)</th>
<th width="12.5%" rowspan="2">Total</th>
<th width="3%" rowspan="2"></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
</tr>
<tr>
<td><span id="sr_no">1</span></td>
<td><select input type="text" name="item_name[]" id="item_name1" class="form-control input-sm
item_name"><option>Select Products</option>
<?php
include('db.php');
$sql = mysql_query("SELECT * FROM tbl_product");
while ($row = mysql_fetch_array($sql)){
echo "<option data-price=".$row['Price'].">".$row['Product']."</option>";
}
?>
</select>
</td>
<td><input type="text" name="order_item_quantity[]" id="order_item_quantity1" data-srno="1" class="form-
control input-sm order_item_quantity" /></td>
<td><input type="text" name="order_item_price[]" id="order_item_price1" data-srno="1" class="form-
control input-sm number_only order_item_price" /></td>
<td><input type="text" name="order_item_actual_amount[]" id="order_item_actual_amount1" data-
srno="1" class="form-control input-sm order_item_actual_amount" readonly /></td>
<td><input type="text" name="order_item_tax1_rate[]" id="order_item_tax1_rate1" data-srno="1"
class="form-control input-sm number_only order_item_tax1_rate" /></td>
<td><input type="text" name="order_item_tax1_amount[]" id="order_item_tax1_amount1" data-srno="1"
readonly class="form-control input-sm order_item_tax1_amount" /></td>
<td><input type="text" name="order_item_tax2_rate[]" id="order_item_tax2_rate1" data-srno="1"
class="form-control input-sm number_only order_item_tax2_rate" /></td>
<td><input type="text" name="order_item_tax2_amount[]" id="order_item_tax2_amount1" data-srno="1"
readonly class="form-control input-sm order_item_tax2_amount" /></td>
<td><input type="text" name="order_item_tax3_rate[]" id="order_item_tax3_rate1" data-srno="1"
class="form-control input-sm number_only order_item_tax3_rate" /></td>
<td><input type="text" name="order_item_tax3_amount[]" id="order_item_tax3_amount1" data-srno="1"
readonly class="form-control input-sm order_item_tax3_amount" /></td>
<td><input type="text" name="order_item_final_amount[]" id="order_item_final_amount1" data-srno="1"
readonly class="form-control input-sm order_item_final_amount" /></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add_row" id="add_row" class="btn btn-success btn-xs">+</button>
</div>
</td>
</tr>
<tr>
<td align="right">Total</td>
<td align="right"><span id="final_total_amt"></span></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" name="total_item" id="total_item" value="1" />
<input type="submit" name="create_invoice" id="create_invoice" class="btn btn-info" value="Create" />
</td>
</tr>
</table>
</div>
</form>
Это код jquery, который циклически отображает товар и цену.
$(function(){
$('#invoice_form').on('click', function(){
var count = $(this).find('option:selected').attr('data-price');
var row_id = $(this).attr("id");
$('#order_item_price'+count).val(row_id );
$('#order_item_price1').val(count).append(html_code);
})
});
$(document).ready(function(){
var final_total_amt = $('#final_total_amt').text();
var count = 1;
$(document).on('click', '#add_row', function(){
count++;
$('#total_item').val(count);
var html_code = '';
html_code += '<tr id="row_id_'+count+'">';
html_code += '<td><span id="sr_no">'+count+'</span></td>';
html_code += '<td><select input type="text" name="item_name[]" id="item_name'+count+'" class="form-
control input-sm item_name"><option>Select Products</option>
<?php
$r = mysql_query("select * from tbl_product");
while($row = mysql_fetch_array($r)){
echo '<option data-price='.$row["Price"].'>'.$row["Product"].'</option>';
}
?>
</select>
</td>';
html_code += '<td><input type="text" name="order_item_quantity[]" id="order_item_quantity'+count+'"
data-srno="'+count+'" class="form-control input-sm number_only order_item_quantity" /></td>';
html_code += '<td><input type="text" name="order_item_price[]" id="order_item_price'+count+'" data-
srno="'+count+'" class="form-control input-sm number_only order_item_price" /></td>';
html_code += '<td><input type="text" name="order_item_actual_amount[]"
id="order_item_actual_amount'+count+'" data-srno="'+count+'" class="form-control input-sm
order_item_actual_amount" readonly /></td>';
html_code += '<td><input type="text" name="order_item_tax1_rate[]" id="order_item_tax1_rate'+count+'"
data-srno="'+count+'" class="form-control input-sm number_only order_item_tax1_rate" /></td>';
html_code += '<td><input type="text" name="order_item_tax1_amount[]"
id="order_item_tax1_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm
order_item_tax1_amount" /></td>';
html_code += '<td><input type="text" name="order_item_tax2_rate[]" id="order_item_tax2_rate'+count+'"
data-srno="'+count+'" class="form-control input-sm number_only order_item_tax2_rate" /></td>';
html_code += '<td><input type="text" name="order_item_tax2_amount[]"
id="order_item_tax2_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm
order_item_tax2_amount" /></td>';
html_code += '<td><input type="text" name="order_item_tax3_rate[]" id="order_item_tax3_rate'+count+'"
data-srno="'+count+'" class="form-control input-sm number_only order_item_tax3_rate" /></td>';
html_code += '<td><input type="text" name="order_item_tax3_amount[]"
id="order_item_tax3_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm
order_item_tax3_amount" /></td>';
html_code += '<td><input type="text" name="order_item_final_amount[]"
id="order_item_final_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm
order_item_final_amount" /></td>';
html_code += '<td><button type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-xs
remove_row">X</button></td>';
html_code += '</tr>';
$('#invoice-item-table').append(html_code);
});
$(document).on('click', '.remove_row', function(){
var row_id = $(this).attr("id");
var total_item_amount = $('#order_item_final_amount'+row_id).val();
var final_amount = $('#final_total_amt').text();
var result_amount = parseFloat(final_amount) - parseFloat(total_item_amount);
$('#final_total_amt').text(result_amount);
$('#row_id_'+row_id).remove();
count--;
$('#total_item').val(count);
});
function cal_final_total(count)
{
var final_item_total = 0;
for(j=1; j<=count; j++)
{
var quantity = 0;
var price = 0;
var actual_amount = 0;
var tax1_rate = 0;
var tax1_amount = 0;
var tax2_rate = 0;
var tax2_amount = 0;
var tax3_rate = 0;
var tax3_amount = 0;
var item_total = 0;
quantity = $('#order_item_quantity'+j).val();
if(quantity > 0)
{
price = $('#order_item_price'+j).val();
if(price > 0)
{
actual_amount = parseFloat(quantity) * parseFloat(price);
$('#order_item_actual_amount'+j).val(actual_amount);
tax1_rate = $('#order_item_tax1_rate'+j).val();
if(tax1_rate > 0)
{
tax1_amount = parseFloat(actual_amount)*parseFloat(tax1_rate)/100;
$('#order_item_tax1_amount'+j).val(tax1_amount);
}
tax2_rate = $('#order_item_tax2_rate'+j).val();
if(tax2_rate > 0)
{
tax2_amount = parseFloat(actual_amount)*parseFloat(tax2_rate)/100;
$('#order_item_tax2_amount'+j).val(tax2_amount);
}
tax3_rate = $('#order_item_tax3_rate'+j).val();
if(tax3_rate > 0)
{
tax3_amount = parseFloat(actual_amount)*parseFloat(tax3_rate)/100;
$('#order_item_tax3_amount'+j).val(tax3_amount);
}
item_total = parseFloat(actual_amount) + parseFloat(tax1_amount) + parseFloat(tax2_amount) +
parseFloat(tax3_amount);
final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
$('#order_item_final_amount'+j).val(item_total);
}
}
}
$('#final_total_amt').text(final_item_total);
}
$(document).on('blur', '.order_item_price', function(){
cal_final_total(count);
});