how do i sum values inside loop using javascript onchange / onkeyup ? i put each of them, numbered id based on the loop...
here is my code example
<?php
$no = 1;
foreach($data as $array)
{
echo "<tr>";
echo "<td><input type='number' id='price".$no."' value='.$array['price'].'></td>";
echo "<td><input type='number' id='discount".$no."' onkeyup='keyup(".$no.")'></td>";
echo "<td><input type='number' id='total_price".$no."'></td>";
echo "</tr>";
$no++;
}
<input type='text' readonly id='total_payment'>
and here is my javascript
function keyup(id)
{
var price = $('#price'+id).val();
var discount= $('#discount'+id).val();
total_price = parseFloat(price) - parseFloat(discount);
$('#total_price'+id).val(total_price);
}
when i change the value of discount,it sum all of total_price field into total_payment.
how to do that ? i already set some form to show the example
JSFIDDLE: https://jsfiddle.net/20gb8n1g/
Attaching on keyup handlers on every input and then doing the math should work in a "in real time" fashion
$( document ).ready(function() {
$("body").on("keyup", "input", function(event){
$(this).closest(".line").find(".tot_price").val( $(this).closest(".line").find(".qty").val()*$(this).closest(".line").find(".value").val() );
$(this).closest(".line").find(".total_price").val( $(this).closest(".line").find(".tot_price").val()*1-$(this).closest(".line").find(".discount").val() );
var sum = 0;
$('.total_price').each(function() {
sum += Number($(this).val());
});
$(".grand_total").val(sum);
});
});
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' class="grand_total"></td>
</tr>
</tfoot>
</table>
Key parts:
Every row has the class "line" to stop looking up when you're doing the math
Every input has a class depending on what it is, instead of an id.
The handler basically does:
check where you triggered "keyup"
Look up to the "line" and then down to the "tot_price"
Change that value to the "value" * "qty" of that "line"
Look up to the "line" and then down to the "total_price"
Change that value to the "tot_price" * 1- "discount" of that "line"
Finally update "grand_total" with the sum of all those "total_price"s
I got it to work on my local machine by taking what you had on your JsFiddle and modifying one of the parseFloat() calls, which you incorrectley called using a capital L like this: parseFLoat(). This should do the trick for you.
Note: Be certain that your path you to your index.js(or whatever file your JavaScript is in) is correct within your <head> tag.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='20000'></td>
<td><input type='number' id='tot_price1' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount1' onkeyup='newFunc()'></td>
<td><input type='number' readonly value='40000' id='total_price1'></td>
</tr>
<tr>
<td><input type='number' readonly value='3'></td>
<td><input type='number' readonly value='30000'></td>
<td><input type='number' id='tot_price2' readonly value='90000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount2'></td>
<td><input type='number' readonly value='90000'></td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price3' readonly value='20000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount3'></td>
<td><input type='number' readonly value='20000'></td>
</tr>
<tr>
<td><input type='number' readonly value='4'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price4' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount4'></td>
<td><input type='number' readonly value='40000'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' ></td>
</tr>
</tfoot>
</table>
</body>
</html>
JS:
function newFunc() {
var total_price = $('#tot_price1').val();
var discount = $('#discount1').val();
n_discount = parseFloat(discount) / 100;
v_discount = parseFloat(total_price) * parseFloat(n_discount);
t_discount = parseFloat(total_price) - parseFloat(v_discount);
$('#total_price1').val(t_discount);
}
i cant output the total amount of price. here is my code.
HTML.
<?php foreach($result as $row): ?>
<!-- <td><input type="hidden" name="material_id[]" value="<?= $order_no = generate_random(5); ?>">
</th> -->
<td><input type="hidden" name="material_id[]" value="<?= encode($row->material_id); ?>">
<?= $row->material_id; ?></td>
<td><input type="hidden" name="" value="<?= $row->material_name; ?>">
<?= $row->material_name; ?></td>
<td><input type="hidden" id="price'<?= $no;?>'" name="material_price[]" value="<?= $row->material_price; ?>">
<?= $row->material_price; ?></td>
<td <?php if($row->material_status == 'Inactive'){
echo 'class="text-danger"';
}else{
echo 'class="text-success"';
} ?> >
<?= $row->material_status; ?>
</td>
<div class="form-group">
<td>
<input type="number" onkeyup="autosum(<?= $no;?>)" id="qty'<?= $no;?>" value="" name="material_qty[]" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
<div class="form-group">
<td>
<input type="text" readonly id="total'<?= $no;?>'" value="" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
</tr>
<?php $no++; ?>
<?php endforeach;?>
<tr style='position:absolute;margin-left: 895px;margin-top:20px;'>
<td colspan='4' >Grand Total :</td>
<td><input type='number' id="grandtotal" class="form-control" readonly style="width: 80px;"></td>
</tr>
<input type="hidden" name="order_no" value="<?= $order_no = generate_random(5); ?>" style="width:50px;height: 30px;">
<input type="hidden" name="order_id" value="<?= $order_id =generate_random(5); ?>" style="width:50px;height: 30px;">
</tbody>
</table>
<br>
<br>
<br>
<button type="button" class="fadeIn second btn btn-secondary" style="margin-left:890px;margin-top:50px;">CANCEL</button>
<button type="submit" class="fadeIn second btn btn-danger" style="margin-left:1000px;margin-top:-50px;background-color: red;">ORDER</button>
</form>
Related
In the light of the code below, I want the return type to have a separate total and if the sales will be the result of the total sales input. In the meantime, the whole Total is going to Sales Total. Below are 2 roads as an example. There will be many more rows like this, each of which will have a type of sales / return. The following two inputs will fill up accordingly.
var grandTotal = 0;
$("input[name='qty[]']").each(function(index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var total = parseFloat(parseFloat(qty) * parseFloat(price)).toFixed(2);
if (!isNaN(total)) {
$("input[name='sub_total[]']").eq(index).val(total);
grandTotal = parseFloat(parseFloat(grandTotal) + parseFloat(total)).toFixed(2);
$('#total').val(grandTotal);
}
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<div onload="add_calcualte ()">
<table border="1">
<thead>
<tr>
<th>Type</th>
<th>Product</th>
<th>Quantity</th>
<th>Price </th>
<th>Sub Total</th>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Sale"> Sale</>
<option value="Retrun"> Retrun</>
</select>
</td>
<td><input name='product_name[]' value='Mobile' ></td>
<td><input type='text' name='qty[]' class='qty' value='5'></td>
<td><input type='number' name='price[]' class='price' value='15000'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Retrun"> Retrun</>
<option value="Sale"> Sale</>
</select>
</td>
<td><input name='product_name[]' value='Headphone' ></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
</thead>
</table>
<br>
Sales TOTAL:
<input class="form-control text-right" readonly type="text" id="total" name="total">
<hr>
Return TOTAL:
<input class="form-control text-right" readonly type="text" id="return" name="return">
</div>
You could do something like this:
function getTotals() {
var total = $("select option[value=Sale]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#total").val(total)
var _return = $("select option[value=Return]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#return").val(_return)
}
Also I assume <option value="Retrun"> Retrun</> should be <option value="Return"> Return</option>
Demo
$("input[name='qty[]']").each(function(index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var total = parseFloat(parseFloat(qty) * parseFloat(price)).toFixed(2);
if (!isNaN(total)) {
$("input[name='sub_total[]']").eq(index).val(total);
getTotals();
}
})
function getTotals() {
var total = $("select option[value=Sale]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#total").val(total)
var _return = $("select option[value=Return]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#return").val(_return)
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<div onload="add_calcualte ()">
<table border="1">
<thead>
<tr>
<th>Type</th>
<th>Product</th>
<th>Quantity</th>
<th>Price </th>
<th>Sub Total</th>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Sale"> Sale
</option>
<option value="Return"> Retrun
</option>
</select>
</td>
<td><input name='product_name[]' value='Mobile'></td>
<td><input type='text' name='qty[]' class='qty' value='5'></td>
<td><input type='number' name='price[]' class='price' value='15000'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Return"> Retrun
</option>
<option value="Sale"> Sale
</option>
</select>
</td>
<td><input name='product_name[]' value='Headphone'></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Return"> Retrun
</option>
<option value="Sale"> Sale
</option>
</select>
</td>
<td><input name='product_name[]' value='Headphone'></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
</thead>
</table>
<br> Sales TOTAL:
<input class="form-control text-right" readonly type="text" id="total" name="total">
<hr> Return TOTAL:
<input class="form-control text-right" readonly type="text" id="return" name="return">
</div>
Hi i have this simple code with three inputs
totalofservices, totalontarget & totalofftarget
i would like the flow of the code to be like this
a. user key in total of services
b. user key in total on target (it should not be larger than total of services)
c. Total off target is fill up automatically ( totalof services - totalontarget)
this what i tried so far which is currently not working
https://jsfiddle.net/03oqrczh/4/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.totalofservices').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalontarget").val($(this).val());
tr.find(".totalofftarget").val("0");
});
});
$('.totalontarget').keyup( getDiff);
function getDiff(){
var num1=1*$('#totalofservices').val() || 0;
var num2=1*$('#totalontarget').val() || 0;
$('.total').val( num1-num2);
}
</script>
<table>
<tr>
<td>Zone 1</td>
<td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 2</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 3</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
</table>
Updated the code below so that input values are calculated and set correctly. Key up event handler for totalontarger element was not working properly. I fixed that too.
Replace your script block with this:
<script>
$(document).ready(function() {
$('.totalofservices').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalontarget").val(0);
tr.find(".totalofftarget").val("0");
});
$('.totalontarget').keyup(function() {
var tr = $(this).closest('tr');
var num1=tr.find(".totalofservices").val();
var num2=tr.find(".totalontarget").val();
if( num2 > num1 ) {
alert( 'Total of Target must be less than Total on Services' );
}
else {
tr.find(".totalofftarget").val(num1-num2);
}
});
});
</script>
https://jsfiddle.net/cjf7m2ms/
$(document).ready(function() {
$('.totalontarget').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalofftarget").val(
parseInt(tr.find('.totalofservices').val()) - parseInt($(this).val())
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr>
<td>Zone 1</td>
<td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 2</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 3</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
</table>
I am not quite sure about the flow you've mentioning. Let me know if I got it wrong. Now it's calculating once the totalontarget is keyup.
[this type output i want i am fetchint data from database and storing in table than quantity will be adde by usernow on if user enter uantity than i want total in add column`
Sr. No.
Product Name
Price
Quantity
ADD
</tr>
<tr>
<?php
mysql_query ("set character_set_results='utf8'");
$query= mysql_query("SELECT * FROM $statement LIMIT $startpoint,$limit");
while($row = mysql_fetch_array($query))
{
?>
<td><?php echo $row['srno'];?></td>
<td><?php echo $row['pname'];?></td>
<!-- <td><input id="price" type="number" value="0" oninput="updateOutput()"/></td>
<td><input id="qty" type="number" value="0" oninput="updateOutput()" /></td>-->
<td> <input id="price" type="number" value="<?php echo $row['price'];?>" oninput="myFunction()"></td>
<td><input id="qty" type="number" value="0" oninput="myFunction2()" ></td>
<td>
<p id="demo">0</p>
</td>
</tr>
`]1
<script>
function myFunction() {
var price = document.getElementsByClassName('price');
var quantity = document.getElementsByClassName('quantity');
var totalPrice=0,totalQuantity=0;
for(var i=0;i<price.length;i++){
totalPrice+=parseInt(price[i].innerHTML);
}
for(var i=0;i<quantity.length;i++){
totalQuantity+=parseInt(quantity[i].value);
}
console.log(totalPrice,totalQuantity); /*Here is your Result variable*/
document.getElementById('priceResult').innerHTML = totalPrice;
}
</script>
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
<tr>
<th class="table-header-repeat line-left minwidth-1">Price</th>
<th class="table-header-repeat line-left minwidth-1">Quantity</th>
<th class="table-header-repeat line-left minwidth-1">ADD</th>
</tr>
<tr><?php
mysql_query ("set character_set_results='utf8'");
$query= mysql_query("SELECT * FROM product");
while($row = mysql_fetch_array($query))
{
?>
<td class="price" >5</td>
<td><input class="quantity" type="number" value="0" oninput="myFunction()" ></td>
<td>
<div id="priceResult"></div>
</td>
</tr>
<?php } ?>
</table>
JavaScript Solution:
function getResult(){
var price = document.getElementsByClassName('price');
var quantity = document.getElementsByClassName('quantity');
var totalPrice=0,totalQuantity=0;
for(var i=0;i<price.length;i++){
totalPrice+=parseInt(price[i].value);
}
for(var i=0;i<quantity.length;i++){
totalQuantity+=parseInt(quantity[i].value);
}
document.getElementById('totalPrice').innerHTML = totalPrice;
document.getElementById('totalQuantity').innerHTML = totalQuantity;
}
getResult();
<table border="1" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
<tr style="background:#3cf;color:white">
<th class="table-header-repeat line-left minwidth-1">Price</th>
<th class="table-header-repeat line-left minwidth-1">Quantity</th>
<th class="table-header-repeat line-left minwidth-1">ADD</th>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="10"></td>
<td><p id="demo">0</p></td>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><p id="demo">0</p></td>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="50"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="30"></td>
<td><p id="demo">0</p></td>
</tr>
<tr style="background:black;color:white">
<td id="totalPrice"></td>
<td id="totalQuantity"></td>
<td> </td>
</tr>
</table>
Here is a tutorial i followed for reference: http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html
Here is my javascript....
<script type="text/javascript">
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$("#btn").click(function(){
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
</script>
This is my html code to show the sum value..
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="image"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="905"> </td>
<td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>
<td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>
How to show this sum value in textbox after button click.
Please help...
try this with val() method I have edited the answer..
<script>
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$("#btn").click(function () {
calculateSum();
$("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
here is the Fiddle
Okay, so I know this is the kind of answer that annoys people but...
Have you tried debuging javascript? It is possible to debug javascript code. For example using firebug: https://getfirebug.com/javascript . It might help.
Also, where are you assigning value of Sum to anything? Are you sure you did not want sum to be global variable (outside of any function)?
$('#idOfTextBox').val(sum.toFixed(2));
i am trying to clone the fieldset as name + 1,2,3 and so on and as well as the inputs id but after cloning one pair of worker compensation fieldset when i click on another fieldset type it gives its input id after the previous cloned fieldset like 4 5 6 as id. i am a novice programmer so plz help me.attached image to understand more and reply me if there is problem.
<script type="text/javascript">
function cloneit(a,b)
{
var fieldset = a;
var fi_class = b;
//alert(fi_class);
var count = fi_class.split(/woc_class1/g).length - 1;
alert(count);
if(count == 1)
{
var newNum = new Number(1);
}
else
{
var num = $('.cloned').length;
var newNum = new Number(num + 1);
}
var newElem = $(fieldset).clone().attr('id', fieldset + newNum).addClass('cloned');
$(newElem).css('margin-top','20px');
//set all div id's and the input id's
newElem.children('div').each(function(i) {
this.id = 'input' + (newNum * 5 + i);
});
newElem.find('input').each(function() {
this.id = this.id + newNum;
this.name = this.name + newNum;
});
if (num > 0) {
$('.cloned:last').after(newElem);
} else {
$(fieldset).after(newElem);
}
$('#delete').removeAttr('disabled');
if (newNum == 5) $('#add').attr('disabled', 'disabled');
}
function remclone()
{
$('.cloned:last').remove();
$('#add').removeAttr('disabled');
if ($('.cloned').length == 0) {
$('#delete').attr('disabled', 'disabled');
}
}
</script>
Screenshot
here is the html for it
<fieldset id="woc_fieldset">
<legend>Worker Compensation</legend>
<table border="0">
<tr>
<td>Carier </td>
<td><input type="text" name="worker_compensation_carrier" id="worker_compensation_carrier" value="<?php echo $a->worker_compensation_carrier; ?>" required="required"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="worker_compensation_phone" id="worker_compensation_phone" class="phone" value="<?php echo $a->worker_compensation_phone; ?>" required="required"/></td>
</tr>
<tr>
<td>Premium</td>
<td><input type="text" name="worker_compensation_premium" id="worker_compensation_premium" value="<?php echo $a->worker_compensation_premium; ?>" required="required"/></td>
</tr>
<tr>
<td>Renewal Date</td>
<td><input type="text" name="worker_compensation_renewal_date" id="worker_compensation_renewal_date" value="<?php echo $a->worker_compensation_renewal_date; ?>" required="required"/></td>
</tr>
</table>
<button type="button" id="delete" onclick="remclone();">Delete</button>
</fieldset>
<button type="button" id="add" onclick="cloneit('#woc_fieldset');">Add</button>
<fieldset id="two">
<legend>General Liability</legend>
<table border="0">
<tr>
<td>Carier</td>
<td><input type="text" name="general_liability_carrier" id="general_liability_carrier" value="<?php echo $b->general_liability_carrier; ?>" required="required"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="general_liability_phone" id="general_liability_phone" value="<?php echo $b->general_liability_phone; ?>" required="required"/></td>
</tr>
<tr>
<td>Premium</td>
<td><input type="text" name="general_liability_premium" id="general_liability_premium" value="<?php echo $b->general_liability_premium; ?>" required="required"/></td>
</tr>
<tr>
<td>Renewal Date</td>
<td><input type="text" name="general_liability_renewal_date" id="general_liability_renewal_date" value="<?php echo $b->general_liability_renewal_date; ?>" required="required" /></td>
</tr>
</table>
</fieldset>
<fieldset id="three">
<legend>Group Health</legend>
<table border="0">
<tr>
<td>Carier</td>
<td><input type="text" name="group_health_carrier" id="group_health_carrier" value="<?php echo $c->group_health_carrier; ?>" required="required"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="group_health_phone" id="group_health_phone" value="<?php echo $c->group_health_phone; ?>" required="required" /></td>
</tr>
<tr>
<td>Premium</td>
<td><input type="text" name="group_health_premium" id="group_health_premium" value="<?php echo $c->group_health_premium; ?>" required="required"/></td>
</tr>
<tr>
<td>Renewal Date</td>
<td><input type="text" name="group_health_renewal_date" id="group_health_renewal_date" value="<?php echo $c->group_health_renewal_date; ?>" required="required"/></td>
</tr>
</table>
</fieldset>
<fieldset id="four">
<legend>Property</legend>
<table border="0">
<tr>
<td>Carier</td>
<td><input type="text" name="property_carrier" id="property_carrier" value="<?php echo $d->property_carrier; ?>" required="required"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="property_phone" id="property_phone" value="<?php echo $d->property_phone; ?>" required="required"/></td>
</tr>
<tr>
<td>Premium</td>
<td><input type="text" name="property_premium" id="property_premium" value="<?php echo $d->property_premium; ?>" required="required"/></td>
</tr>
<tr>
<td>Renewal Date</td>
<td><input type="text" name="property_renewal_date" id="property_renewal_date" value="<?php echo $d->property_renewal_date; ?>" required="required"/></td>
</tr>
</table>
</fieldset>
<fieldset id="five">
<legend>Commercial Auto</legend>
<table border="0">
<tr>
<td>Carier</td>
<td><input type="text" name="commercial_auto_carrier" id="commercial_auto_carrier" value="<?php echo $e->commercial_auto_carrier; ?>" required="required"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" name="commercial_auto_phone" id="commercial_auto_phone" value="<?php echo $e->commercial_auto_phone; ?>" required="required" /></td>
</tr>
<tr>
<td>Premium</td>
<td><input type="text" name="commercial_auto_premium" id="commercial_auto_premium" value="<?php echo $e->commercial_auto_premium; ?>" required="required" /></td>
</tr>
<tr>
<td>Renewal Date</td>
<td><input type="text" name="commercial_auto_renewal_date" id="commercial_auto_renewal_date" value="<?php echo $e->commercial_auto_renewal_date; ?>" required="required" /></td>
</tr>
</table>
</fieldset>
function cloneit(a,b)
{
var fieldset = a;
var fi_class = b;
alert(fi_class);
var num = $('.'+fi_class).length;
alert(num);
var newNum = new Number((num - 1) +1);
var newElem = $(fieldset).clone().attr('id', fieldset + newNum);
$(newElem).css('margin-top','20px');
//set all div id's and the input id's
newElem.children('div').each(function(i) {
this.id = 'input' + (newNum * 5 + i);
});
newElem.find('input').each(function() {
this.id = this.id + newNum;
this.name = this.name + newNum;
});
if (num > 0) {
$('.'+fi_class+':last').after(newElem);
} else {
$(fieldset).after(newElem);
}
$('#delete').removeAttr('disabled');
if (newNum == 5) $('#add').attr('disabled', 'disabled');
}
function remclone()
{
$('.'+fi_class+':last').remove();
$('#add').removeAttr('disabled');
if ($('.cloned').length == 0) {
$('#delete').attr('disabled', 'disabled');
}
}