Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've a table as given below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table class="productList" width="600">
<tr>
<th colspan="9" align="left"> Select your product list</th>
</tr>
<tr class="head">
<td width="25" align="right"></td>
<td width="270" align="center">Product Name</td>
<td width="80" align="center">Quantity</td>
<td width="80" align="center">Unit Price</td>
<td width="80" align="center">Line Total</td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
</table>
<label for="net_ammount">Net Ammount:</label>
<input type="text" name="net_ammount" class="summary" disabled>
</body>
</html>
Please help me to find sum of each "Line Total" column input value and show in "Net Amount" input element. every input has same id actually I found them with it's row and column index value..........
data are coming from the server. when user change the product code all field get enable and when user select product total line value showing in "Total Line" column. Please check at http://www.lpgbookkeeping.in/
username: blueflame2014
password: Blueflame#2014
I want when user select product code in datagrid . Sum of all "Line Total" show in Net Amount.
Please somebody help me........
Here is jsfiddle demo of my table
As you donot have any content on linetotal input so this may give NAN, but this method u have to write and call it on button click or any other event where u wana update the textbox.
function getTotal() {
var linetotal =0;
var line = document.forms[0].elements["linetotal"];
for (var i = 0, len = line.length; i < len; i++) {
linetotal = linetotal + parseInt(line[i].value) ;
}
document.getElementById("summary").value = linetotal;
}
ID can never be same ,Id is unique,classes can be same (multiple) in HTML
I by mistake put it in comment instead of answer box :)
Assuming you make the id of your "Net Amount" input element, "summary_net_amount", the answer is something like this:
function calculateLineTotals(){
var $linetotals = $("input[name=\"linetotal\"]");
var sum = 0;
$linetotals.each(function() {
sum += parseInt($(this).val());
});
$("#summary_net_amount").val(sum);
}
Related
I need to sum all the subtotals I got into a grand total. This is for an assignment that I need to submit in about 2 weeks. Here's my JS file:
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
for (i=1; i<=5; i++) {
document.getElementById("grand_total").value = 0;
}
}
I want to do that when I click a button to calculate the grand total price. Here's the HTML file that shows the button just near the end of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
<script src="JS/book-order.js"></script>
<script></script>
</head>
<body>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label></th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_2" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_2" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_2" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_3" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="qty" id="qty_3" min="0" value="0" onkeyup="calculate_Total()"/></td>
<td><input type="number" name="total" id="total_3" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_4" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_4" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_4" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_5" min="0.00" value="0.00" step="0.01" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_5" min="0" value="0" onkeyup="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_5" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()" /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="discount()">View Price After 10% discount</button>
<button onclick="calculate_Total();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
<script src="js/book-order.js"></script>
</body>
</html>
How do I sum the sub-totals into a grand total? Any help would be appreciated, thank you.
After you correctly calculated all subtotals (first for loop) you assigned the values to a series of html elements (the ones with ID total_1, total_2, total_3, total_4, total_5).
That allows you to iterete them in your second for loop, accumulating the value of each subtotal to a grandTotal variable.
After the loop is over, you can assign the result to the html element with ID grand_total.
function calculate_Total() {
for (i=1; i<=5; i++) {
const idName = "price_" + i;
const price = parseFloat(document.getElementById(idName).value);
const idQty= "qty_" + i;
const qty = parseFloat(document.getElementById(idQty).value);
const total = price*qty;
const idTotal = "total_" + i;
document.getElementById(idTotal).value = total.toFixed(2);
}
let grandTotal = 0
for (i=1; i<=5; i++) {
grandTotal += parseFloat(document.getElementById("total_" + i).value)
}
document.getElementById("grand_total").value = grandTotal;
}
I want to change the value of all input:text from the select menu. This value will change only the matched td.class from data-pset inside <select>
I can only think of this code. Please help me out where am I missing. (I'm new to jquery and still learning.)
$("select.set_price").change(function() {
var pset = $(this).data('pset');
$(this).find('td.' + pset).find('input.price').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>1</td>
<td class="set1"><input type="number" name="set1_1" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td class="set1"><input type="number" name="set1_2" value="1" /></td>
</tr>
<tr>
<td>3</td>
<td class="set1"><input type="number" name="set1_3" value="1" /></td>
</tr>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>4</td>
<td class="set2"><input type="number" name="set2_1" value="1" /></td>
</tr>
<tr>
<td>5</td>
<td class="set2"><input type="number" name="set2_2" value="1" /></td>
</tr>
<tr>
<td>6</td>
<td class="set2"><input type="number" name="set2_3" value="1" /></td>
</tr>
</table>
I expect all inputs under each set to change the value accordingly to the select change. Please click here for the fiddle : https://jsfiddle.net/stgcd5k7/
There's three issues in your jQuery code.
You're looking for the td elements inside the select as you call find(). Look for them from the DOM root instead.
You haven't added the price class to the input HTML.
The second .set_price element has its data-pset set to a value of set1 instead of set2.
Fix those issues and the logic works correctly:
$("select.set_price").change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>1</td>
<td class="set1"><input type="number" name="set1_1" value="1" class="price" /></td>
</tr>
<tr>
<td>2</td>
<td class="set1"><input type="number" name="set1_2" value="1" class="price" /></td>
</tr>
<tr>
<td>3</td>
<td class="set1"><input type="number" name="set1_3" value="1" class="price" /></td>
</tr>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set2">
<option value="" disabled selected>Set2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>4</td>
<td class="set2"><input type="number" name="set2_1" value="1" class="price" /></td>
</tr>
<tr>
<td>5</td>
<td class="set2"><input type="number" name="set2_2" value="1" class="price" /></td>
</tr>
<tr>
<td>6</td>
<td class="set2"><input type="number" name="set2_3" value="1" class="price" /></td>
</tr>
</table>
Question: If the calculated grand total is a negative value, set it to zero instead. If the calculated grand total is a negative value, set it to zero instead. Additionally, the
user should be alerted that an error has occurred. You may use the appropriate medium
(i.e., prompt box, paragraph text under the table, etc.) to carry out this function.
I'm trying to do this in my code but seems like it is not working right. When grand total is lesser than 0 it should display zero on the grand total input box.
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css">
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5">
<input
type="Submit"
id="click"
onclick="calculateTotal()"
value="Calculated Grand Total Price"
style="font-size: 18px;"
>
</td>
<td colspan="2">
<input
type="number"
name="total"
class="total"
id="grandtotal"
value="0.00"
style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;"
disabled
/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
</body>
</html>
This is my javascript:
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i <= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value =
(document.getElementById("book" + i + "_price").value / 1).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal = parseFloat(total1.value) + parseFloat(total2.value) + parseFloat(total3.value) +
parseFloat(total4.value) + parseFloat(total5.value);
grandtotal.value = fulltotal.toFixed(2);
//error
if (fulltotal < 0) {
alert("An error has occurred : Please enter positive values only.");
document.getElementById("grandtotal")[0].value = 0;
}
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}
if I am getting this right, you don't need Unit Price to be less than 0 ever.
Which is pretty easy to handle using HTML.
add the min=0 attribute on the input tags
<input type = "number" name = "unit price" id="book5_price" placeholder = "0.00" min=0>
Use the Math.max function - it will return the largest of the two (either the total if it is bigger than 0, or 0 - if the total is negative)
total = Math.max(0, total);
There were numerous little errors, like anytime you get a value from an input element it will always be text, so to add it you need to convert to a number. In the code below you'll see + right before element.value items - that little + is actually a shorthand notation to tell JS to treat that as a number. I also saw you wanted to do a loop, which was a good idea, so I show how to do that.
function calculateTotal() {
const NumberOfBooks = 5;
let sum_total = 0;
let grandtotal = document.getElementById("grandtotal");
for (let i = 1; i <= NumberOfBooks; ++i) {
let bprice = "book" + i + "_price",
bquan = "book" + i + "_quan",
btotal = "book" + i + "_total";
let item_price = +document.getElementById(bprice).value
let item_quantity = +document.getElementById(bquan).value
let total = (item_price * item_quantity).toFixed(2);
document.getElementById(btotal).value = total
sum_total += +total;
}
if (sum_total < 0) {
alert("An error has occurred : Please enter positive values only.");
}
sum_total = Math.max(0, sum_total);
grandtotal.value = sum_total.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = +document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
// not sure what this function is for
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}
<h1>Book Ordering System</h1>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5"><input type="Submit" id="click" onclick="calculateTotal()" value="Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan="2"><input type="number" name="total" class="total" id="grandtotal" value="0.00" style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;" disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.
The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()
I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.
I've been racking my brain on this one for hours now. I've been trying to use JavaScript from other order forms I've found on Google and modify it to fit my needs but my lack of expertise in this area is my biggest obstacle right now. I'm wondering if anyone on here can help me. I'd be more than happy to throw $20 in your PayPal account if you can get me to a solution.
This is exactly what I want to accomplish, but as a web form: http://justinwhalley.net/orderform/orderform.xlsx
This is the web form I've coded out but with no Javascript hooked up to it: http://justinwhalley.net/orderform/
Calculations required...
For each part/product:
Free Boxes = Ordered Boxes * 1
Total Units = (Ordered Boxes + Free Boxes) * Units Per Box
Subtotal with Promo = Ordered Boxes * Units Per Box * Distributor Value
For order totals...
Total Boxes = Ordered Boxes (all) * 2 [it is x2 to account for free boxes as well]
Total Units = Total Units (all)
Subtotal = Subtotal with Promo (all)
Subtotal with Tax = Subtotal * 1.13
Shipping & Handling = 10
Order Total = Subtotal with Tax + Shipping & Handling
Any help is very much appreciated, and hopefully others can benefit from this solution as well.
Thanks in advance,
Justin.
<form>
<table id="order-table">
<tr>
<th class="part-number">Part #</th>
<th class="units-per-box">Units Per Box</th>
<th class="distributor-value">Distributor Value</th>
<th class="ordered-boxes">Boxes</th>
<th class="free-boxes">Free Boxes</th>
<th class="total-units">Total Units</th>
<th class="part-subtotal">Subtotal with Promo</th>
</tr>
<tr class="part-heading">
<td colspan="7">ROOF VENTS - 45, 50 & 85 Sq. Inch Roof Vent. (RR - Rodent Resistant)</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT1045</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>11.34</span></td>
<td class="ordered-boxes"><select name="at1045-ordered-boxes" class="ordered-boxes-input" id="at1045-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1045-free-boxes" name="at1045-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1045-total-units" name="at1045-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1045-part-subtotal" name="at1045-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-row even">
<td class="part-number">AT1050</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>12.96</span></td>
<td class="ordered-boxes"><select name="at1050-ordered-boxes" class="ordered-boxes-input" id="at1050-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050-free-boxes" name="at1050-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1050-total-units" name="at1050-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050-part-subtotal" name="at1050-part-subtotal" disabled="disabled" /></td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT1050-RR</td>
<td class="units-per-box">12</td>
<td class="distributor-value">$<span>19.04</span></td>
<td class="ordered-boxes"><select name="at1050rr-ordered-boxes" class="ordered-boxes-input" id="at1050rr-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050rr-free-boxes" name="at1050rr-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1050rr-total-units" name="at1050rr-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050rr-part-subtotal" name="at1050rr-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-row even">
<td class="part-number">AT1085</td>
<td class="units-per-box">9</td>
<td class="distributor-value">$<span>19.44</span></td>
<td class="ordered-boxes"><select name="at1085-ordered-boxes" class="ordered-boxes-input" id="at1085-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at1085-free-boxes" name="at1085-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at1085-total-units" name="at1085-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1085-part-subtotal" name="at1085-part-subtotal" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">ROOF ROLL VENT - 20' All in One Roll</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT2020</td>
<td class="units-per-box">6</td>
<td class="distributor-value">$<span>77.76</span></td>
<td class="ordered-boxes"><select name="at2020-ordered-boxes" class="ordered-boxes-input" id="at2020-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at2020-free-boxes" name="at2020-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at2020-total-units" name="at2020-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at2020-part-subtotal" name="at2020-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">EXHAUST VENTS - 4" Exhaust Vent (AT1050 Style)</td>
</tr>
<tr class="part-row even">
<td class="part-number">AT3010</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>12.96</span></td>
<td class="ordered-boxes"><select name="at3010-ordered-boxes" class="ordered-boxes-input" id="at3010-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at3010-free-boxes" name="at3010-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at3010-total-units" name="at3010-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3010-part-subtotal" name="at3010-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">EXHAUST VENT ADAPTER - 4-6" Adapter for Bathroom or Range Hood fan for AT1050 ONLY</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT3022</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>13.23</span></td>
<td class="ordered-boxes"><select name="at3022-ordered-boxes" class="ordered-boxes-input" id="at3022-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at3022-free-boxes" name="at3022-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at3022-total-units" name="at3022-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3022-part-subtotal" name="at3022-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">INTAKE VENT - Air Intake Vent</td>
</tr>
<tr class="part-row even">
<td class="part-number">AT7045</td>
<td class="units-per-box">8</td>
<td class="distributor-value">$<span>19.71</span></td>
<td class="ordered-boxes"><select name="at7045-ordered-boxes" class="ordered-boxes-input" id="at7045-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at7045-free-boxes" name="at7045-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at7045-total-units" name="at7045-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at7045-part-subtotal" name="at7045-total-units" disabled="disabled" /></td>
</tr>
<tr class="part-heading">
<td colspan="7">VENT ACCESSORIES - Wave Deflector</td>
</tr>
<tr class="part-row odd">
<td class="part-number">AT9010</td>
<td class="units-per-box">48</td>
<td class="distributor-value">$<span>2.00</span></td>
<td class="ordered-boxes"><select name="at9010-ordered-boxes" class="ordered-boxes-input" id="at9010-ordered-boxes">
<option value="0">0</option>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
</select></td>
<td class="free-boxes"><input type="text" class="free-boxes-input" id="at9010-free-boxes" name="at9010-free-boxes" disabled="disabled" /></td>
<td class="total-units"><input type="text" class="total-units-input" id="at9010-total-units" name="at9010-total-units" disabled="disabled" /></td>
<td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at9010-part-subtotal" name="at9010-total-units" disabled="disabled" /></td>
</tr>
<tr>
<th colspan="3"></th>
<th colspan="2">Total Boxes</th>
<th>Total Units</th>
<th>Subtotal with Promo</th>
</tr>
<tr>
<td class="subtotal" colspan="3">Subtotal:</td>
<td colspan="2"><input type="text" class="total-boxes-input" id="total-boxes" disabled="disabled" /></td>
<td><input type="text" class="total-units-input" id="total-units" disabled="disabled" /></td>
<td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td>
</tr>
<tr class="instructions">
<td colspan="3"></td>
<td colspan="2">Must be 18 or under</td>
<td colspan="2"></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Subtotal:</td>
<td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Subtotal With Tax:</td>
<td><input type="text" class="subtotal-tax-input" id="subtotal-tax" disabled="disabled" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Shipping & Handling:</td>
<td><input type="text" class="shipping-handling" id="shipping-handling" disabled="disabled" value="10" /></td>
</tr>
<tr class="totals">
<td colspan="5"></td>
<td class="totals-label">Order Total:</td>
<td><input type="text" class="order-total" id="order-total" disabled="disabled" /></td>
</tr>
</table>
</form>
The following script should do the work (remember to update the values of the selected options, right now they are all 1 in your code) :
<script type="text/javascript">
$table = $('#order-table');
calculateFormFields();
$(document).ready(function () {
$table.find('.ordered-boxes-input').bind('click', function () {
calculateFormFields();
});
});
function calculateFormFields() {
var rows = $table.find('tr');
var SubtotalTotalBoxes = 0;
var SubtotalTotalUnits = 0;
var Subtotal_SubWithPromo = 0;
var Total_Subtotal = 0;
var Total_SubtotalWithTax = 0;
var OrderTotal = 0;
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var numberOfBoxes = 0;
//Free boxes
var orderedInput = $(row).find('.ordered-boxes-input');
if (orderedInput.length == 1) {
numberOfBoxes = parseInt(orderedInput.val());
$(row).find('.free-boxes-input').val(numberOfBoxes);//Set number of boxes selected
$(row).find('.total-units-input').val(numberOfBoxes * 2);//Set number of total units
var distributorValueSpan = $($(row).find('.distributor-value')[0]).text();
var distributorValue = parseFloat(distributorValueSpan.replace('$',''));
var unitsPerBox = $($(row).find('.units-per-box')).text();
unitsPerBox = parseFloat(unitsPerBox.replace('$',''));
var subtotal = distributorValue * unitsPerBox * numberOfBoxes;
SubtotalTotalBoxes += numberOfBoxes;
SubtotalTotalUnits = SubtotalTotalBoxes * 2;
Subtotal_SubWithPromo += subtotal;
$(row).find('.part-subtotal-input').val(subtotal);
}
}
Total_Subtotal = Subtotal_SubWithPromo;
Total_SubtotalWithTax = Total_Subtotal * 1.13;
OrderTotal = Total_SubtotalWithTax + 10;
$('#total-boxes').val(SubtotalTotalBoxes);
$('#total-units').val(SubtotalTotalUnits);
$('#subtotal').val(Subtotal_SubWithPromo.toFixed(2));
$('.totals').find('#subtotal').val(Subtotal_SubWithPromo.toFixed(2));
$('#subtotal-tax').val(Total_SubtotalWithTax.toFixed(2));
$('#order-total').val(OrderTotal.toFixed(2));
}
</script>