当我们选择这些字段时，我想显示通过jquery和ajax选择的单个项目的价格、税额和总额。基本上，我必须通过在一个表单中选择多个项目来订购快递订单，并在空白输入字段中显示其各自的总金额，同时还显示订购的总金额
index.php文件
<?php
$connect = new PDO("mysqli:host=localhost;dbname=testing", "root", "");
function fill_weight_select_box($connect)
{
$output1 = '';
$query1 = "SELECT * FROM weights ORDER BY wid ASC";
$statement1 = $connect->prepare($query1);
$statement1->execute();
$result1 = $statement1->fetchAll();
foreach($result1 as $row1)
{
$output1 .= '<option value="'.$row1["rate"].'">'.$row1["weight"].'</option>';
}
return $output1;
}
function fill_mode_select_box($connect)
{
$output = '';
$query = "SELECT * FROM modes ORDER BY mid ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '<option value="'.$row["rate"].'">'.$row["mode"].'</option>';
}
return $output;
}
function fill_distance_select_box($connect)
{
$output2 = '';
$query2 = "SELECT * FROM distances ORDER BY did ASC";
$statement2 = $connect->prepare($query2);
$statement2->execute();
$result2 = $statement2->fetchAll();
foreach($result2 as $row2)
{
$output2 .= '<option value="'.$row2["rate"].'">'.$row2["distance"].'</option>';
}
return $output2;
}
function fill_tax_select_box($connect)
{
$output3 = '';
$query3 = "SELECT * FROM gst ORDER BY id ASC";
$statement3 = $connect->prepare($query3);
$statement3->execute();
$result3 = $statement3->fetchAll();
foreach($result3 as $row3)
{
$output3 .= '<option value="'.$row3["gst"].'">'.$row3["gst"].'</option>';
}
return $output3;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h4 align="center">Enter Item Details</h4>
<br />
<form method="POST" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th width="13%">Enter Item Name</th>
<th width="15%">Select mode</th>
<th width="15%">Select Weight</th>
<th width="13%">Select Distance</th>
<th width="10%"> Tax</th>
<th width="5%">Enter Quantity</th>
<th width="10%">Price</th>
<th width="10%">Tax Amount</th>
<th width="15%">Total price</th>
<th width="5%" ><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<tr>
<td align="right"><b>Total</td>
<td align="right"><b><span id="final_total_amt"></span></b></td>
</tr>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var final_total_amt = $('#final_total_amt').text();
var count = 1;
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
html += '<td><select name="item_mode[]" id="item_mode'+count+'" class="form-control item_mode"><option value="">Select Mode</option><?php echo fill_mode_select_box($connect); ?></select></td>';
html += '<td><select name="item_weight[]" id="item_weight'+count+'" class="form-control item_weight"><option value="">Select Weight</option><?php echo fill_weight_select_box($connect); ?></select></td>';
html += '<td><select name="item_distance[]" id="item_distance'+count+'" class="form-control item_distance"><option value="">Select Distance</option><?php echo fill_distance_select_box($connect); ?></select></td>';
html += '<td><select name="item_tax[]" id="item_tax'+count+'" class="form-control item_unit"><option value=""> Tax</option><?php echo fill_tax_select_box($connect); ?></select></td>';
html += '<td><input type="number" name="item_quantity[]" id="item_quantity'+count+'" class="form-control form-control-sm col-5 item_quantity" /></td>';
html+='<td><input type="text" name="price[]" id="price'+count+'" data-srno="'+count+'" class="form-control order_item_actual_amount" readonly /></td>';
html+='<td><input type="text" name="tax_amount[]" id="tax_amount'+count+'" data-srno="'+count+'" class="form-control order_item_actual_amount" readonly /></td>';
html+='<td><input type="text" name="total_amount[]" id="total_amount'+count+'" data-srno="'+count+'" class="form-control order_item_actual_amount" readonly /></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);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
function cal_final_total(count)
{
var final_item_total = 0;
for(j=1; j<=count; j++)
{
var mode = 0;
var weight = 0;
var distance = 0;
var tax = 0;
var quantity = 0;
var price1 = 0;
var price = 0;
var tax_amount= 0;
var total_amount = 0;
var item_total = 0;
mode = $('#item_mode'+j).val();
if(mode > 0)
{
weight = $('#item_weight'+j).val();
if(weight > 0)
{
distance = $('#item_distance'+j).val();
if(distance > 0)
{
price1 = parseFloat(mode) + parseFloat(weight) + parseFloat(distance);
quantity = $('#item_quantity'+j).val();
if(quantity > 0)
{
price = parseFloat(price1)*parseFloat(quantity);
$('#price'+j).val(price);
}
tax = $('#item_tax'+j).val();
if(tax > 0)
{
tax_amount = parseFloat(price)*parseFloat(tax)/100;
$('#tax_amount'+j).val(tax_amount);
}
final_item_total = parseFloat(price) + parseFloat(tax_amount);
$('#total_amount'+j).val(final_item_total);
}
}
}
}
$('#final_total_amount').text(final_item_total);
}
$(document).on('blur', '.price', function(){
cal_final_total(count);
});
$(document).on('blur', '.tax_amount', function(){
cal_final_total(count);
});
$(document).on('blur', '.total_amount', function(){
cal_final_total(count);
});
var form_data = $(this).serialize();
if(error == '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
if(data == 'ok')
{
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
window.location = "index.php";
}
}
});
}
else
{
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
</script>
暂无答案！
目前还没有任何答案，快来回答吧！