display individual total price through jquery and ajax
1
i want to display price,tax amount and total of an individual item select through jquery and ajax when we select these fields.Basically i have to ordered a courier order by select multiple item in one form and displayed their respective total amount side in a blank input field and also display total amount of ordered
Index.Php File
<?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>
php jquery mysql ajax
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
add a comment |
1
i want to display price,tax amount and total of an individual item select through jquery and ajax when we select these fields.Basically i have to ordered a courier order by select multiple item in one form and displayed their respective total amount side in a blank input field and also display total amount of ordered
Index.Php File
<?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>
php jquery mysql ajax
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
add a comment |
1
1
1
i want to display price,tax amount and total of an individual item select through jquery and ajax when we select these fields.Basically i have to ordered a courier order by select multiple item in one form and displayed their respective total amount side in a blank input field and also display total amount of ordered
Index.Php File
<?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>
php jquery mysql ajax
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
i want to display price,tax amount and total of an individual item select through jquery and ajax when we select these fields.Basically i have to ordered a courier order by select multiple item in one form and displayed their respective total amount side in a blank input field and also display total amount of ordered
Index.Php File
<?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>
php jquery mysql ajax
php jquery mysql ajax
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
asked Nov 24 '18 at 10:49
Aakash SinghaAakash Singha
61
61
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457367%2fdisplay-individual-total-price-through-jquery-and-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457367%2fdisplay-individual-total-price-through-jquery-and-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
