I have a table, which has an input at the end of each line.
Here is the input:
<td><input data-price='<?= floatval($row['Prix']); ?>' ?>' type="number" name="quantity" id="quantity"></td>
I have a script that takes the price of the data-price in the input and multiplies
it with the number in the input. Right now my script starts off by adding all of the prices, but then it multiplies the total by only the first input in my table.
How can I change my code so that it multiplies each price by the quantity in the input?
Here is the script:
document.getElementById("submit").onclick = function giveTotal() {
var total = 0;
var grandTotal = document.getElementById('grandTotal');
var quantity = document.getElementById('quantity');
var nodes = document.getElementsByName('quantity');
[].forEach.call(nodes, function(node) {
console.log(quantity.value);
console.log(node.dataset.price);
total += (parseFloat(node.dataset.price) * quantity.value)
})
grandTotal.innerHTML = total;
console.log('Total: ' + total);
};
IDs are unique -- no two elements can have the same ID. When you use document.getElementById(), it will return only the first element that matches that ID and no other.
You already have access to each input from your nodes variable, and you're already iterating over them in your forEach loop. So instead of multiplying by quantity.value, you should just be multiplying by node.value so that you're using the value of each specific input.
You need to select each table row by itself like this:
(In this example I assume your table has the id orders)
document.getElementById("submit").onclick = function giveTotal() {
// Get the table element (id="orders")
const $table = document.getElementById('orders');
// Get the grand total element
const $grandTotal = document.getElementById('grandTotal');
// Temporary variable
let total = 0;
// For each input element in the table add the price*value to total
table.querySelectorAll('input').forEach($input => {
total += (parseFloat($input.dataset.price) * $input.value)
});
// Write total to $grandTotal element
$grandTotal.innerText = total;
// Debug output
console.log('Total: ' + total);
};
You can get table rows and process them. Something like this.
document.getElementById('submit').onclick = function() {
var total = Array.from(document.querySelector('#cart tbody')
.querySelectorAll('tr')) //get array
.reduce((acc, cur) => acc + cur.querySelector('td:first-child').innerText * cur.querySelector('input').value, 0);
console.log(total);
};
<table id="cart">
<thead>
<tr>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.45</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
<tr>
<td>7.80</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
<tr>
<td>0.95</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
</tbody>
</table>
<button type="button" id="submit">Submit</button>
Related
I create my personal project, and I called this system as ordering system I used laravel for this and the front end javascript and jquery.
I have question
Question:
I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1
The question if I increment the value of input type number how the price double if i increase the value of number?
Example of my output
My Front end Codes:
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
//my logic to increment quantity but not working.
$("#qty_change").bind('keyup mouseup', function () {
alert("changed");
});
//function for getting the data from search product by clicking to the table row
$("tr#productClicked").click(function () {
//to get the price in tr
var price = $(this).closest("tr").find(".menu_price").text();
//to get the menu in tr
var menu_name = $(this).closest("tr").find(".menu_name").text();
//row count
var rowCount = $('table#myTable tr:last').index() + 1;
//append input to quantity the value is 1
var input = '<input type="number" name="qty_number" class="form-control" value="1" id="qty_change" />';
//Item must be editable
var contenteditable = 'contenteditable=true';
table.append('<tr><td>'+rowCount+'</td><td class="total">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td>'+price+'</td><td>'+price+'</td></tr>');
});
Html Table:
<table class="table table-hover" id="myTable">
<thead>
<tr style="font-size: 14px; ">
<th scope="col">#</th>
<th scope="col">Qty</th>
<th scope="col">Item</th>
<th scope="col" style="text-align: right">Cost</th>
<th scope="col" style="text-align: right">Total</th>
</tr>
</thead>
<tbody style="font-size:14px;">
<tr>
{{-- <td>1</td>
<td>x 2</td>
<td contenteditable='true'>Feast Chicken</td>
<td align="right">$10.00</td>
<td align="right">$20.00</td> --}}
</tr>
</tbody>
</table>
New update:
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var value = e.target.value;
// Don't do anything if value is not valid
// else you will see NaN in result.
if (!value || value < 0)
return;
var $parentRow = $(e.target).parent().parent();
var $siblingTotal = $parentRow.find('.total');
var $siblingCost = $parentRow.find('.cost');
var cost = $siblingCost.text();
// parseInt and parseFloat because
// `value` and `cost` are strings.
value = parseInt(value);
cost = parseFloat(cost);
$siblingTotal.text(value * cost);
}
$("tr#productClicked").click(function () {
swal({
title: "Are you sure?",
text: "Once you will add it will automatically send to the cart",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
swal("Menu Added", "You clicked the button!", "success");
//to get the price in tr
var price = $(this).closest("tr").find(".menu_price").text();
//to get the menu in tr
var menu_name = $(this).closest("tr").find(".menu_name").text();
//row count
var rowCount = $('table#myTable tr:last').index() + 1;
//append input to quantity the value is 1
var input = '<input type="number" value="1">';
//Item must be editable
var contenteditable = 'contenteditable=true';
table.append('<tr><td>'+rowCount+'</td><td class="amount">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td class="cost">'+price+'</td><td class="total">'+price+'</td></tr>');
} else {
swal("Cancelled");
}
});
});
Listen for "input" event using jQuery's .on.
(Please note that "input" event has nothing to do with jQuery, it's a native JavaScript thing.)
This is a sample code, because the code you provided is not complete. But you should be able to get the concept:
Usual code sample
$('.amount > input[type="number"]').on('input', updateTotal);
function updateTotal(e){
var amount = parseInt(e.target.value);
if (!amount || amount < 0)
return;
var $parentRow = $(e.target).parent().parent();
var cost = parseFloat($parentRow.find('.cost').text());
var total = (cost * amount).toFixed(2);
$parentRow.find('.total').text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input</th>
<th>Cost per item</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">27</td>
<td class="total">27</td>
</tr>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">14.50</td>
<td class="total">14.50</td>
</tr>
</tbody>
</table>
For the sake of understanding
// Get all inputs with type="number"
// that is a child of <td class="amount">.
var $amountInput = $('td.amount > input[type="number"]');
// Attach "input" event listener to the input fields
// so that we know when the value changes and handle the changes.
// In this case, the event handler is the function "updateTotal".
$amountInput.on('input', updateTotal);
function updateTotal(e){
// Get the `input` element that triggers this event.
var $thisInput = $(e.target);
// Get the value of $thisInput
var amount = $thisInput.val();
// The `value` is a string,
// so we need `parseInt` to make it a number.
// Use `parseInt` because quantity can't have decimals.
amount = parseInt(amount);
// Don't do anything if value is not valid
// else you will see NaN in result.
if (!amount || amount < 0)
return;
// Get the parent <tr> of this input field
var $parentRow = $thisInput.parent().parent();
// Find the <td class="total"> element
var $siblingTotal = $parentRow.find('.total');
// Find the <td class="cost"> element
var $siblingCost = $parentRow.find('.cost');
// Get the cost from <td class="cost"> element
var cost = $siblingCost.text();
// The "cost" is a string,
// so we need `parseFloat` to make it a number.
// Use `parseFloat` because cost can have decimals.
cost = parseFloat(cost);
// Calculate the total cost
var total = amount * cost;
// .toFixed(2) to force 2 decimal places
total = total.toFixed(2);
// Update the total cost into <td class="total"> element
$siblingTotal.text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Input</th>
<th>Cost per item</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">27</td>
<td class="total">27</td>
</tr>
<tr>
<td class="amount"><input type="number" value="1"></td>
<td class="cost">14.50</td>
<td class="total">14.50</td>
</tr>
</tbody>
</table>
Note
If you still have difficulties understanding, you might want to read:
Why prefix "$" sign in only some variable names? (Generally called the Hungarian Notation)
What is td.amount > input[type="number"]?
What is jQuery's .on()?
What is e.target?
What is jQuery's .val()?
What is parseInt()?
What is parseFloat()?
What does !value mean?
Why do you return nothing?
What is jQuery's .parent()?
What is jQuery's .find()?
What is jQuery's .text()?
What is .toFixed()?
I have a table that makes automatically 2 calculations:
Calculation of numbers of days after the selection of arrived and departed date from two input date field with calendar, result is stored is field (nbjours)
Multiplication of 3 fields (nbcheveaux * days* price), result is stored ind field (total)
There is a button that when we click on it a new row is added. How can i reproduce the same automatic calculations on the news rows added after click ?
1- my add rows function
window. addRow = function addRow(btn) {
var parentRow = btn.parentNode.parentNode;
var table = parentRow.parentNode;
var tr = document.createElement("tr");
var tdNbC = document.createElement("td");
var tdDateArrive = document.createElement("td");
var tdDateDepart = document.createElement("td");
var tdNbJour = document.createElement("td");
var tdPrix = document.createElement("td");
var tdTotal = document.createElement("td");
var td3 = document.createElement("td");
var inputDateArrive = document.createElement("input");
var inputDateDepart = document.createElement("input");
inputDateArrive.type = "text";
inputDateDepart.type = "text";
inputDateArrive.setAttribute("class", "date");
inputDateDepart.setAttribute("class", "date1");
var inputNbrC = document.createElement("input");
var inputNbrJour = document.createElement("input");
var inputPrix = document.createElement("input");
var inputTotal = document.createElement("input");
var inputButton = document.createElement("button");
inputButton.type = "button";
inputButton.innerHTML = "+";
inputButton.onclick = function(){
addRow(this);
};
tdNbC.appendChild(inputNbrC);
tdDateArrive.appendChild(inputDateArrive);
tdDateDepart.appendChild(inputDateDepart);
tdNbJour.appendChild(inputNbrJour);
tdPrix.appendChild(inputPrix);
tdTotal.appendChild(inputTotal);
td3.appendChild(inputButton);
tr.appendChild(tdNbC);
tr.appendChild(tdDateArrive);
tr.appendChild(tdDateDepart);
tr.appendChild(tdNbJour);
tr.appendChild(tdPrix);
tr.appendChild(tdTotal);
tr.appendChild(td3);
table.appendChild(tr);
$(inputDateDepart).mask("99/99/9999");
$(inputDateArrive).mask("99/99/9999");
}
2- function that calculate numbers of days
$(document).ready(function() {
$('.date1').change(function() {
var start = $('.date').datepicker('getDate');
var end = $('.date1').datepicker('getDate');
if (start<end) {
var days = (end - start)/1000/60/60/24;
$('.days').val(days);
}
else {
alert ("Depated date must be greater that arrived date!");
$('.date').val("");
$('.date1').val("");
$('.days').val("");
}
}); //end change function
}); //end ready
3- Function that operate the multiplication
$('.nbrcevaux,.days,.price').keyup(function() {
var nbrcevaux = parseInt($('.nbrcevaux').val());
var days = parseInt($('.days').val());
var prix = parseInt($('.price').val());
$('.total').val(nbrcevaux * days * prix );
});
4- HTML Table
<table>
<tr>
<td class="centrer">Nbr de chevaux</td>
<td class="centrer">Arrived Date</td>
<td class="center">Departed Date</td>
<td class="centrer">Nb/Days</td>
<td class="centrer">Prix/jr/ cheval/boxe</td>
<td class="centrer"> Total</td>
</tr>
<tr>
<td><input type="text" name="nbrcevaux" class="nbrcevaux" /></td>
<td><input type="text" name="datearrive" class ="date"/> </td>
<td><input type="text" name="datedepart" class ="date1" /></td>
<td><input type="text" name="nbrjours" class ="days" /></td>
<td><input type="text" name="prix" class="price" /></td>
<td><input type="text" name="total" class="total" /></td>
<td><button type="button" onClick ="addRow(this)">+</button> </td>
</tr>
How can i integrate the functions calculate numbers of days and multiplication in the added new row displyed after click ?
So, I was bored and tackled your question, by rewriting it because you had quite a bit of superfluous code.
Your main issue (with the calculations on the added rows) stems from the fact that you were relying on classes to uniquely identify elements, but that won't cut it. Each new row and element within the row needs to have its own unique id.
I also took the liberty of making sure that there will only ever be one "Add row" button, as you'll see.
This working example has comments inline to help follow what's going on.
$(function() {
// Declare & initialize module wide variables to store DOM elements:
var $txtnbrcevaux = $("#nbrcevaux"), $txtDateArrive = $("#dateArrive"),
$txtDepart = $("#datedepart"), $txtnbrjours = $("#nbrjours"), $txtPrix = $("#prix"),
$txtTotal = $("#total"), $btnAdd = $("#btnAddRow"), $masterRow = $("#master1");
// Unique value that will identify new elements
var count = 1;
// Establish the date picker fields
$txtDateArrive.datepicker();
$txtDepart.datepicker();
// Wire up the button's click event:
$btnAdd.on("click", function(){
// Make a copy of the last row
var newTR = $("tr[id=master" + count + "]").clone(true);
// Update the new row's id to be unique
newTR[0].id = "master" + (count + 1);
// Loop through the child elements and modify their id's so that they are unique
newTR.children().each(function(index){
if(this.children.length > 0){
// Wipe out old (copied values)
this.firstChild.value = "";
var oldID = this.firstChild.id;
this.firstChild.id = oldID.substring(0, oldID.length) + (count + 1);
// Cloning datepickers creates problems because the clones remain bound to the
// original input element. Here, we'll create a new input element and then
// insert it where the current one is, then we'll remove the current one:
if($(this.firstChild).is(".date, .date1")){
var newPicker = document.createElement("input");
newPicker.id = this.firstChild.id;
newPicker.name = this.firstChild.name;
newPicker.setAttribute("class", this.firstChild.className.replace(" hasDatepicker", ""));
newPicker.style.width = "80px";
// Set up the new datepicker:
$(newPicker).insertAfter(this.firstChild);
$(this.firstChild).remove();
$(newPicker).datepicker();
}
}
});
// Increment the count so the next row will use the next number for its id's
count++;
// Hide the last row's button
this.style.display = "none";
// Add the new row to the table
$("table").append(newTR);
// Commented due to not having plugin available
// $(inputDateDepart).mask("99/99/9999");
// $(inputDateArrive).mask("99/99/9999");
});
$('.nbrcevaux, .days, .price').on("keyup", function() {
var nbrCevaux = this.parentElement.parentElement.querySelector(".nbrcevaux").value;
var days = this.parentElement.parentElement.querySelector(".days").value;
var prix = this.parentElement.parentElement.querySelector(".price").value;
// Your problem was that you were trying to work with values from
// classes and not specific elements. Changing the function to expect
// the data to be passed to it and having it return the answer allow
// you to control what goes in and where to put what comes out
this.parentElement.parentElement.querySelector(".total").value = nbrCevaux * days * prix;
});
$txtDepart.change(function() {
var start = $txtDateArrive.datepicker('getDate');
var end = $txtDepart.datepicker('getDate');
if (start < end) {
var days = (end - start)/1000/60/60/24;
$txtnbrjours.val(days);
} else {
alert ("Depated date must be greater that arrived date!");
$txtDateArrive.val("");
$txtDepart.val("");
$txtnbrjours.val("");
}
}); //end change function
}); //end ready
/* This is only added to shrink things down so they appear within the space allotted */
input[type=text] {width:80px;}
body {font-size:.5em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<table>
<tr>
<td class="centrer">Nbr de chevaux</td>
<td class="centrer">Arrived Date</td>
<td class="center">Departed Date</td>
<td class="centrer">Nb/Days</td>
<td class="centrer">Prix/jr/ cheval/boxe</td>
<td class="centrer"> Total</td>
</tr>
<tr id="master1">
<td><input type="text" id="nbrcevaux" name="nbrcevaux" class="nbrcevaux"></td>
<td><input type="text" id="dateArrive" name="dateArrive" class ="date"></td>
<td><input type="text" id="datedepart" name="dateDepart" class ="date1"></td>
<td><input type="text" id="nbrjours" name="nbrjours" class ="days"></td>
<td><input type="text" id="prix" name="prix" class="price"></td>
<td><input type="text" id="total" name="total" class="total"></td>
<td><button type="button" id="btnAddRow">+</button> </td>
</tr>
</table>
I've got a table-like structure with text inputs in which I am trying to make an entire row to be removed with all their children, but first passing the values of cells up one by one
in the rows below to keep IDs numbering structure.
The table structure is like this:
<table cellpadding=0>
<tr id="myRow1">
<td id="#R1C1">
<input class="myCell">
</td>
<td id="#R1C2">
<input class="myCell">
</td>
<td id="#R1C3">
<input class="myCell">
</td>
<td id="#R1C4">
<input class="myCell">
</td>
</tr>
<tr id="myRow2">
<td id="#R2C1">
<input class="myCell">
</td>
<td id="#R2C2">
<input class="myCell">
</td>
<td id="#R2C3">
<input class="myCell">
</td>
<td id="#R2C4">
<input class="myCell">
</td>
</tr>
<!-- ...and so on. -->
</table>
Having this table, when some event is triggered,I make this code run:
var rows = 1; // This value is updated when adding/removing a line
//This code runs from any <tr> by event keyup
if (event.altKey) { // I define here all Alt+someKey actions.
// Getting position values
var currentId = $(this).attr('id');
var row = Number(currentId.split('C')[0].substring(1));
var column = Number(currentId.split('C')[1]);
var belowVal;
if (event.which == 66) { //Case Ctrl+B
// If not the last row, start looping
if (rows > row) {
var diff = rows - row;
// Iteration over rows below
for (var i = 0; i < diff; i++) {
// Iteration over each column
for (var c = 1; c <= 4; c++) {
// here I try to get the value from column below
belowVal = $('#R'+(row+1+i).toString() +
'C'+c.toString()).val();
$('#R'+(row+i).toString()+'C' +
c.toString()).find('.myCell').val(belowVal);
}
}
}
$('#myRow'+rows.toString()).empty();
$('#myRow'+rows.toString()).remove();
rows--;
}
}
It works fine for removing the last row, but, when trying to remove an upper row, the values of current row and the ones below become blank instead of moving up. I made this code for each row below to pass it's values to the upper row, but it isn't doing what I wanted.
Why is this happening? I couldn't figure it out.
The problem seem to be, that the ids you are using to access the values are not the ids of the input elements, but rather the ids of the containing table cells.
Here an approach, which doesnt use the ids, but relies on the nodes structure instead, code not tested:
if (event.which == 66) {
var currentrow = $(this);
var currentinputs = currentrow.find('input.myCell');
while(var nextrow = currentrow.next('tr')) {
var nextinputs = nextrow.find('input.myCell');
currentinputs.each(function(index,element){
element.val(nextinputs.get(index).val());
});
currentrow = nextrow;
currentinputs = nextinputs;
}
currentrow.remove();
}
RESOLVED
Thanks to #JHoffmann, I was able to resolve my problem like this:
for (var c = 1; c <= 4; c++) {
// here I try to get the value from column below
belowVal = $('#R'+(row+1+i).toString()+'C'+c.toString())
.find('.myCell').val();
$('#R'+(row+i).toString()+'C'+c.toString())
.find('.myCell').val(belowVal);
}
In the line that assigns a value to belowVal, I forgot to call the method .find('.myCell') before calling .val(). That was the mistake that caused my code to fail, as #JHoffmann commented in his answer.
I have prepared this jsfiddle
The problem is that I have many rows containing product qty * price = sub total
This also must dynamically calculate grand total for all sub total amounts. And the biggest problem is the trigger since we may not have change trigger on the qty select fields.. really complicated for me.
I am so far stacked here:
$(document).ready(function() {
var qty=$('.qty').val();
var price = $('.price').val();
var sum = 0;
$('.amount').each(function() {
sum += parseFloat($(this).text());
});
});
Please give me idea for:
Which trigger to use so it can calculate on page load as well and if qty dropdown is changed too.
How to calculate each row first
thank you for your help and time in advance!
You have your answer here: http://jsfiddle.net/kY98p/10/
I changed the html to use the tags thead and tfoot for header and footer
Its just a cycle over the lines where you get the quantity and price and update the amount...
Here is the function that you should call:
function update_amounts()
{
var sum = 0.0;
$('#myTable > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
sum+=amount;
$(this).find('.amount').text(''+amount);
});
//just update the total to sum
$('.total').text(sum);
}
And the event that you need is:
$('.qty').change(function() {
update_amounts();
});
UPDATE: jsfiddle with total: http://jsfiddle.net/kY98p/11/
Fiddle Demo
$(document).ready(function () {
var amt = $('.amount:gt(0)'), //select element with class greater than one
tot = $('#total'); // cache selectors
function calculator() {
amt.text(function () { // set text of class amount elements
var tr = $(this).closest('tr'); // get tr
var qty = tr.find('.qty').val(); // find it in current tr and get value of element with class qty
var price = tr.find('.price').val(); //get price
return parseFloat(qty) * parseFloat(price); // return product
});
tot.text(function () { //get total
var sum = 0; //set sum = 0
amt.each(function () { //run through all element with class amount
sum += parseFloat($(this).text()); // add text to sum
});
return sum; //set sum to total
});
}
calculator(); //call the above function
$('.qty,.price').change(calculator);// run calculator function when element with class qty or price is changed
});
You can try this one (I changed your html template). Solution work as you want:
1. Calculate each row (find closest input and get data from it)
2. Calculate total and put to span
3. If you will add more selected(with my work class) it will be work
$(".work").on("change", function(){
var total = 0;
$(".work").each(function(){
var val = $(this).closest("tr").find("input[type='text']").val();
total = total + ($(this).val()*val || 0);
});
$(".total").text(total);
});
And html
<table>
<tbody>
<tr>
<th>Product name</th>
<th>Qty</th>
<th>Price</th>
<th align="center"><span id="amount" class="amount">Amount</span></th>
</tr>
<tr>
<td>Product 1</td>
<td>
<select value="" class="qty work" name="qty">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td><input type="text" value="11.60" class="price"></td>
<td align="center"><span id="amount" class="amount">0</span> eur</td></tr>
<tr>
<td>Product 2</td><td>
<select value="" class="qty work" name="qty">
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
<td><input type="text" value="15.26" class="price"></td>
<td align="center"><span id="amount" class="amount">0</span> eur</td></tr>
<tr>
<td colspan="2"></td>
<td align="right"><span id="total" class="total">TOTAL</span> </td>
</tr>
</tbody>
</table>
And work demo
Here is a solution that works in with your fiddle (http://jsfiddle.net/kY98p/20/) with one minor DOM update. I put the header of the table in a THEAD so that you can count on the TBODY TR rows to be those with data.
Here we have functions to compute the total of each row and of the whole table.
When you change a row, we recompute that row and then re compute the total.
When we load the page, we recompute everything.
$(document).ready(function () {
function computeRowTotal(row) {
var $row = $(row)
var qty = $row.find('.qty').val();
var price = $row.find('.price').val();
if (qty && price) {
$row.find('.amount').html(qty * price);
}
}
function computeTotal() {
var total = 0.0
$('tbody tr .amount').each(function () {
console.log('T', $(this).text());
total += parseFloat($(this).text());
})
$('tbody tr .total').html("Total: " + total);
}
function updateTable() {
$('tbody tr').each(function (row) {
computeRowTotal(this)
});
computeTotal(this)
};
$('select').bind('change', function () {
computeRowTotal($(this).closest('tr'));
computeTotal();
});
updateTable();
});
I have multiple textfields with same name.
When someone types a number in one of textfield. It should show sum on runtime in Sum Textfield.
Can anyone help me with that?
I have this HTML:
<table width="400" border="1" cellspacing="0">
<tr>
<td colspan="2" align="center">
SUM:
<input type="text" name="sum" id="sum" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="field_1" /></td>
<td><input type="text" name="textfield" id="field_2" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="field_3" /></td>
<td><input type="text" name="textfield" id="field_4" /></td>
</tr>
</table>
Here is my Fiddle:
http://jsfiddle.net/36Yhe/1/
Using vanilla JavaScript you can do it like this:
(function () {
var textFields = document.getElementsByName('textfield');
sum = function() {
var sum = 0;
for (var i = 0; i < textFields.length; i++) {
var val = textFields[i].value;
if (parseFloat(val) == val) {
sum += parseFloat(val);
}
}
document.getElementById('sum').value = sum;
};
document.getElementById('sum-table').addEventListener("keyup", sum, false);
sum();
})();
JSFiddle
Also your element IDs should be unique where as the name can be the same. I have shown this in the above fiddle.
Edited, with updated fiddle, to include changes suggested by #bfontaine
Try this :
// selects all inputs but "#sum"
var inputs = $('input:not(#sum)');
// each time the user releases a key
inputs.keyup(function () {
var sum = 0;
// loops through every inputs
inputs.each(function () {
// parses input's value into a float
// if parsing fails uses 0 instead of NaN (NaN || 0)
sum += parseFloat($(this).val()) || 0;
});
// displays the result
$('#sum').val(sum);
});
Here is a demo : http://jsfiddle.net/wared/8K24v/.
Another (twisted) solution :
var inputs = $('input:not(#sum)');
inputs.keyup(function () {
$('#sum').val(new Function('return ' + inputs.map(function () {
return parseFloat($(this).val()) || 0;
}).get().join('+') + ';')());
});
And its (twisted) demo : http://jsfiddle.net/wared/sraV3/.
Let's unroll the twisted part :
inputs.map(...).get() : Turns a jQuery list of inputs into an array of numbers.
.join('+') : Turns the array of numbers into a string. Example : [1,2].join('+') gives "1+2".
new Function('return ...;')() : Creates a new function and executes it immediately. At this point we have something like : new Function('return 1+1+1+1;')() (evaluate this code into your browser console, the output is obviously the number 4).
Finally, the result of this function is passed to $('#sum').val(...).
Additional contents :
http://api.jquery.com/map/
http://api.jquery.com/get/
MDN : Array join method
MDN : Function (constructor)
MDN : parseFloat