I'm trying to achieve two additions in my code.
I am trying to get the sum of the row values in the last column of the row
I am trying to get the sum of all the final columns in another div
I've achieved the first, my code gives me the correct value of each row. However the second sum is not populating the addition. It's giving me the same value of each row, but I want the value of all rows.
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += sum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>
To fix this you need to create a loop which iterates through all the .netpay elements, not just the one which was updated, and generates the total value.
In addition, you need to perform the same action when the checkbox is changed. The logic itself can also be made more succinct and DRY, like this:
$('.bonus-sum').on('input', updateRowTotal);
$('.bonus-in').on('change', updateRowTotal).trigger('change'); // trigger is to set values on load
function updateRowTotal() {
let $tr = $(this).closest('tr');
let salary = parseFloat($tr.find('.wagein').text()) || 0;
let bonus = parseFloat($tr.find('.bonus-sum').val()) || 0
let rowTotal = salary + ($tr.find('.bonus-in:checked').length ? bonus : 0);
$tr.find('.netpay').text(rowTotal.toFixed(2));
updateTotal();
}
function updateTotal() {
let total = 0;
$('.netpay').each((i, el) => total += parseFloat(el.textContent.trim() || 0));
$('#total').text('₹ ' + total.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>
Note the removal of all the duplicate id attributes in your HTML . They are invalid, and are not required anyway.
I have introduced new variable totalsum.
Replace the below function .your code will work as expected
<script>
var totalsum=0;
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
totalsum+=sum;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += totalsum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
</script>
Related
I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.
If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />
var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />
I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
So This is what i have done till now ,but i can't think of a way to get the data, entered or checked by user for each day in php . Since i have the same name for all the input type for workdays i.e. name='work' . I cant find a way to get the values for each day seperately( USING PHP).
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="suday" /></td>
</tr>
</table>
<br />
<br />
<b>Number Of Employees:</b><input type="number" max="20" min="1" name="noe" placeholder="1 - 20" /> <br /> <br />
<table>
<tr>
<td><b>Buisness Details:</b></td>
<td><input type="date" name="doe"
placeholder="Date Of Establishment" /></td>
</tr>
<tr>
<td></td>
<td><input type="number" name="a_tover" placeholder="ANNUAL TURNOVER" /></td>
</tr>
</table>
</form>
</center>
<script language="javascript">
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</body>
<html>
<head>
<script>
var workdays=[0,0,0,0,0,0,0];
var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var allcheckbox = document.getElementsByName('work');
function checkcheckbox(arr,checked){
for (var i = 0; i < checked.length; i++) {
if(checked[i].checked){
arr[i]=1;
}else{
arr[i]=0;
}
}
console.log(arr);
}
function print(arr,days){
for (var i = 0; i < arr.length; i++) {
if(arr[i]==0){
console.log(days[i]+": close");
}else{
console.log(days[i]+": workday");
}
}
}
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</head>
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
</table>
<br />
<input type="button" value="SEND" onclick="checkcheckbox(workdays,allcheckbox)"/>
<input type="button" value="SEND" onclick="print(workdays,days)"/>
</form>
</center>
</body>
</html>
I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/
You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>
Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});
Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.
I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.
Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:
<form name="isForm" action="">
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
</tr>
<tr>
<td>Last Name:
<input type="hidden" id=queryType name=queryType value="P" />
<input type="text" size="20" autocomplete="off" id="searchField" name="searchField" />
</td>
<td>First Name:
<input type="text" size="20" autocomplete="off" id="firstField" name="firstField" />
</td>
<td align="center" valign="bottom">
<input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle"
onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);
document.getElementById('nameField').innerHTML='';
this.disabled = true;
doCompletion();" >
</td>
<td><div id="nameField"></div></td>
</tr>
<tr>
<td colspan="4">
<table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
<td colspan="3"> </td>
</tr>
</table>
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="3" class="columnHeaderClass">ID(s)</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"><input name="Student_ID" type="text" id="idField" /></td>
<td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
<td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
<td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
<td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
<td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
<td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
<td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
<td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
<td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
<td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
</tr>
<tr>
<td colspan="3">
<div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S">
</div>
</td>
</tr>
</table>
So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.
I think you want something like
function fillNextEmptyTb() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0; i < allInputs.length; i++)
if (allInputs[i].type === "text" && allInputs[i].value == "") {
allInputs[i].value = "whatever you want";
return;
}
}
Or the jQuery way, if you're using it, or plan to try it:
var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");
I have a table with a lot of columns, and each column consists of a text field with a numeric value that can be changed. The last column of the table must hold the sum of all columns. Now here's my question: how can I make the sum change in realtime using javascript? For example if a column value is modified, the sum must be changed in order to fit the new values.
Below is my table:
<table id="sum_table">
<tr>
<td>Column 1</td>
<td><input type="text" name="val1" value="" /></td>
</tr>
<tr>
<td>Column 2</td>
<td><input type="text" name="val2" value="" /></td>
</tr>
<tr>
<td>Column 3</td>
<td><input type="text" name="val3" value="" /></td>
</tr>
[...]
<tr>
<td>Total</td>
<td><input type="text" name="total" value="" /></td>
</tr>
</table>
Thank you.
<html>
<head>
<script type="text/javascript">
function calc()
{
var sum = parseFloat(document.getElementById('val1').value + document.getElementById('val2').value + document.getElementById('val3').value + [...]);
document.getElementById('total').value = sum;
}
</script>
</head>
<body>
<table id="sum_table">
<tr>
<td>Column 1</td>
<td><input type="text" id="val1" value="" OnTextChanged="javascript:calc()"/></td>
</tr>
<tr>
<td>Column 2</td>
<td><input type="text" id="val2" value="" OnTextChanged="javascript:calc()/></td>
</tr>
<tr>
<td>Column 3</td>
<td><input type="text" id="val3" value="" OnTextChanged="javascript:calc()/></td>
</tr>
[...]
<tr>
<td>Total</td>
<td><input type="text" id="total" value="" /></td>
</tr>
</table>
</body>
</html>
That should to the trick.
Edit:
After discussion in the comments, this is the final version: http://jsfiddle.net/gXdwb/3/
$('#sum_table tr:not(.totalColumn) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalColumn) .sum'+thisNumber).each(function() {
total += +$(this).val();
});
$table.find('.totalColumn td:nth-child('+thisNumber+') input').val(total);
});
<table id="sum_table" width="600" border="0">
<tr>
<td>Sum 1</td>
<td>Sum 2</td>
<td>Sum 3</td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" class="sum1" /></td>
<td><input type="text" name="textfield2" id="textfield2" class="sum2" /></td>
<td><input type="text" name="textfield3" id="textfield3" class="sum3"/></td>
</tr>
<tr>
<td><input type="text" name="textfield4" id="textfield4" class="sum1" /></td>
<td><input type="text" name="textfield5" id="textfield5" class="sum2" /></td>
<td><input type="text" name="textfield6" id="textfield6" class="sum3" /></td>
</tr>
<tr>
<td><input type="text" name="textfield7" id="textfield7" class="sum1" /></td>
<td><input type="text" name="textfield8" id="textfield8" class="sum2"/></td>
<td><input type="text" name="textfield9" id="textfield9" class="sum3"/></td>
</tr>
<tr>
<td>Total</td>
<td>Total</td>
<td>Total</td>
</tr>
<tr class="totalColumn">
<td><input type="text" name="textfield10" id="textfield10" /></td>
<td><input type="text" name="textfield11" id="textfield11" /></td>
<td><input type="text" name="textfield12" id="textfield12" /></td>
</tr>
<tr>
<td>bla</td>
<td>bla</td>
<td>bla</td>
</tr>
</table>
As usual, I'm not sure if this is optimal, but it seems to work:
See: http://jsfiddle.net/gXdwb/
$('#sum_table tr:not(:last-child)').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
$table.find('tr:not(:last-child) input:text').each(function() {
total += +$(this).val();
});
$table.find('input[name="total"]').val(total);
});