I have searched a lot and couldn't find a solution, and since my code abilities are somewhat limited, I ask for help.
What I am trying to do is exactly what is found here: http://jsfiddle.net/unKDk/335/
$(function(){
var $iTableTotals = $("#iTable .colTotal");
var $eTableTotals = $("#eTable .colTotal");
var $diffValues = $(".diffValue");
$(".colTotal").on('change keyup', function() {
$iTableTotals.each(function(i){
var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val());
$diffValues.eq(i).val(diff);
});
});
$iTableTotals.eq(0).change();
});
But I would like to have input fields instead of pre-loaded numbers.
To clarify, I found this code on the web, I am no the author of this code.
Thank you.
Not exactly 100% sure what you meant by having input fields instead of pre-loaded numbers. Please see forked Fiddle, hope that's what you meant:
http://jsfiddle.net/B9EWd/
HTML:
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td> Row1</td>
<td class="rowAA"><input value="7" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="2" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA"><input value="1" /></td>
<td class="rowAA"><input value="5" /></td>
<td class="rowBB"><input value="3" /></td>
<td class="rowBB"><input value="4" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
Javascript:
function updateTotals() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().find("input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i + 2)+") input").each(function(){
t += parseInt( $(this).val(), 10 ) || 0;
});
return "Total: " + t;
});
}
$( "input" ).change( updateTotals );
updateTotals();
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
getTotal();
$(".txtNumber").change(function () {
getTotal();
});
});
function getTotal() {
$("#sum_table tr:not(:first,:last) td:last-child").text(function () {
var t = 0;
$(this).prevAll().each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function (i) {
var t = 0;
$(this).parent().prevAll().find("td:nth-child(" + (i + 2) + ")").each(function () {
t += parseInt($(this).find('input').val(), 10) || 0;
});
return "Total: " + t;
});
}
</script>
</head>
<body>
<table id="sum_table" width="300" border="1">
<tr class="titlerow">
<td></td>
<td>Apple</td>
<td>Orange</td>
<td>Watermelon</td>
<td>Strawberry</td>
<td>Total By Row</td>
</tr>
<tr>
<td>Row1</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row2</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="2" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr>
<td>Row3</td>
<td class="rowAA">
<input type="text" value="1" class="txtNumber" /></td>
<td class="rowAA">
<input type="text" value="5" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="3" class="txtNumber" /></td>
<td class="rowBB">
<input type="text" value="4" class="txtNumber" /></td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</table>
</body>
</html>
Related
I have a table in which there is a radio group. There are 5 items and each item has 4 choices (the values for which are 0, 1, 2, 3). I need to not only calculate the total of all these, but also the number of Fails (value = 0). I have work js for both of these. How can I use these together? Any assistance would be greatly appreciated. Thank you.
Count Fails (value = 0):
function setRadios() {
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
onload = setRadios;
Total:
function setRadios() {
function sumRadios() {
var total = 0,
i = 1,
oForm = this.form;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = sumRadios;
}
onload = setRadios;
And finally here is the form (radio group) - set up to calculate the number of fails:
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
</div>
</form>
There are 2 ways to do it. The first one is to add multiple event handlers to one form. Simply:
document.querySelector('#myForm').addEventListener('submit', sendForm);
document.querySelector('#myForm').addEventListener('submit', clearForm);
The second one is to create an anonymous function and call these 2 functions inside it.
document.querySelector('#myForm').addEventListener('submit', function (event) {
sendForm(event);
clearForm(event);
});
You could easily put them together like i did here:
function setRadios() {
var i = 0,
k = 0,
input, inputs = document.getElementById('f1').getElementsByTagName('input');
while (input = inputs.item(i++))
input.onclick = countFail;
}
function countFail() {
var numFail = 0;
oForm = this.form;
for (var i = 1; i <= 5; i++) {
var radgrp = document.getElementsByName('Set' + i);
for (var j = 0; j < radgrp.length; j++) {
var radio = radgrp[j];
if (radio.value == "0" && radio.checked) {
numFail++;
}
}
}
oForm.elements.numFail.value = numFail;
sumRadios(oForm)
}
function sumRadios(oForm) {
var total = 0,
i = 1;
while (radgrp = oForm.elements['Set' + (i++)]) {
j = radgrp.length;
do
if (radgrp[--j].checked) {
total += Number(radgrp[j].value);
break;
}
while (j);
}
oForm.elements.total.value = total;
}
onload = setRadios;
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<form name="f1" method="post" name="buttons" id="f1" onsubmit="return false">
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="20%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="20%" align="center" bgcolor="#CCFFFF">Distinction</td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Task</td>
<td width="20%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="20%" align="center"><input id="task2" type="radio" name="Set1" value="1" /></td>
<td width="20%" align="center"><input id="task3" type="radio" name="Set1" value="2" /></td>
<td width="20%" align="center"><input id="task4" type="radio" name="Set1" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Cohesion</td>
<td width="20%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="20%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1" /></td>
<td width="20%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2" /></td>
<td width="20%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3" /></td>
</tr>
<tr>
<td width="20%" bgcolor="#CCFFFF">Lexis</td>
<td width="20%" align="center"><input id="lexis2" type="radio" name="Set3" value="0" required/></td>
<td width="20%" align="center"><input id="lexis3" type="radio" name="Set3" value="1" required/></td>
<td width="20%" align="center"><input id="lexis4" type="radio" name="Set3" value="2" /></td>
<td width="20%" align="center"><input id="lexis" type="radio" name="Set3" value="3" /></td>
</tr>
<tr>
<td bgcolor="#CCFFFF">Grammar</td>
<td align="center"><input id="grammar2" type="radio" name="Set4" value="0" required/></td>
<td align="center"><input id="grammar3" type="radio" name="Set4" value="1" /></td>
<td align="center"><input id="grammar4" type="radio" name="Set4" value="2" /></td>
<td align="center"><input id="grammar" type="radio" name="Set4" value="3" /></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1" /></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set4" value="2" /></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set4" value="3" /></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">numFails: <input id="numFail" type="text" name="" value="" />
<div align="center">total: <input id="total" type="text" name="" value="" />
</div>
</div>
</form>
</form>
Yes, that is the goods. Thank you so much. I did get it in the end without looking at your code (yours is MUCH better and way more elegant). I would love to hear what you think of my solution (it may not run as snippet, but it does run on my localhost). It is so gratifying when someone understands exactly what you are after.
<?php
$currentPage = $_SERVER[ "PHP_SELF" ];
?>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Basic Report</title>
<script type="text/javascript">
function setRadios() {
function countTotals() {
var numFail = 0;
var total = 0;
oForm = this.form;
for ( var i = 1; i <= 5; i++ ) {
var radgrp = document.getElementsByName( 'Set' + i );
var radgrp1 = document.getElementsByName( 'Set' + i );
for ( var j = 0; j < 5; j++ ) {
var radio = radgrp[ j ];
if ( radio.value == "0" && radio.checked ) {
numFail++;
}
var radio1 = radgrp1[ j ];
if ( radio1.checked ) {
total += Number( radio.value );
}
}
}
oForm.elements.numFail.value = numFail;
oForm.elements.total.value = total;
}
var i = 0,
input, inputs = document.getElementById( 'f1' ).getElementsByTagName( 'input' );
while ( input = inputs.item( i++ ) )
input.onclick = countTotals;
}
onload = setRadios;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form method="post" id="f1" action="<?php echo $editFormAction; ?>">
<br>
<table width="75%" border="1" align="center" cellpadding="0" cellspacing="0" class="table_rs">
<tbody>
<tr>
<td width="17%" align="center" bgcolor="#CCFFFF">Extended Writing</td>
<td width="15%" align="center" bgcolor="#CCFFFF">Fail</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Pass</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Merit</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Distinction</td>
<td width="17%" align="center" bgcolor="#CCFFFF">Excellence</td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Task</td>
<td width="15%" align="center"><input id="task1" type="radio" name="Set1" value="0" required/></td>
<td width="17%" align="center"><input id="task2" type="radio" name="Set1" value="1"/></td>
<td width="17%" align="center"><input id="task3" type="radio" name="Set1" value="2"/></td>
<td width="17%" align="center"><input id="task4" type="radio" name="Set1" value="3"/></td>
<td width="17%" align="center"><input id="task5" type="radio" name="Set1" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Cohesion</td>
<td width="15%" align="center"><input id="cohesion1" type="radio" name="Set2" value="0" required/></td>
<td width="17%" align="center"><input id="cohesion2" type="radio" name="Set2" value="1"/></td>
<td width="17%" align="center"><input id="cohesion3" type="radio" name="Set2" value="2"/></td>
<td width="17%" align="center"><input id="cohesion4" type="radio" name="Set2" value="3"/></td>
<td width="17%" align="center"><input id="cohesion5" type="radio" name="Set2" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Lexis</td>
<td width="15%" align="center"><input id="lexis1" type="radio" name="Set3" value="0" required/></td>
<td width="17%" align="center"><input id="lexis2" type="radio" name="Set3" value="1"/></td>
<td width="17%" align="center"><input id="lexis3" type="radio" name="Set3" value="2"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="3"/></td>
<td width="17%" align="center"><input id="lexis4" type="radio" name="Set3" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Grammar</td>
<td width="15%" align="center"><input id="grammar1" type="radio" name="Set4" value="0" required/></td>
<td width="17%" align="center"><input id="grammar2" type="radio" name="Set4" value="1"/></td>
<td width="17%" align="center"><input id="grammar3" type="radio" name="Set4" value="2"/></td>
<td width="17%" align="center"><input id="grammar4" type="radio" name="Set4" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set4" value="4"/></td>
</tr>
<tr>
<td width="17%" bgcolor="#CCFFFF">Sources</td>
<td width="15%" align="center"><input id="sources1" type="radio" name="Set5" value="0" required/></td>
<td width="17%" align="center"><input id="sources2" type="radio" name="Set5" value="1"/></td>
<td width="17%" align="center"><input id="sources3" type="radio" name="Set5" value="2"/></td>
<td width="17%" align="center"><input id="sources4" type="radio" name="Set5" value="3"/></td>
<td width="17%" align="center"><input id="grammar5" type="radio" name="Set5" value="4"/></td>
</tr>
</tbody>
</table>
<br/>
<div align="center">NumFail: <input id="numFail" type="text" name="numFail" value=""/>
<div align="center">Total: <input id="total" type="text" name="total" value=""/>
<input type="reset" class="button1"/>
</div>
</form>
I have a JS event tied to upArrow :
$('body').on('click', '.UpArrow', function(event) {
var row = $(this).closest('tr');
row.insertBefore(row.prev());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow"></td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow"></td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow"></td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
<td class="UpArrow"></td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
What I want to do is move TR above the TR with class name NameServiceRow
I already tried a number of solutions but none of them worked for me , if you have any solutions I am all ears.
EDIT :
I may have multiple rows with classname NameServiceRow so what I want is to move it above the first occurence of this classname
Are looking for something like this? If you need to move the current tr to the tr with class 'NameServiceRow' occurring just above the clicked, this code may be working.
$(document).on('click', '.UpArrow', function(event) {
var row = $(this).closest('tr');
if(!row.hasClass('NameServiceRow')){
var parentDiv = row.prevAll('.NameServiceRow:first');
row.insertBefore(parentDiv);
row.addClass("NameServiceRow");
parentDiv.removeClass("NameServiceRow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="A 1" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="A 2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="A 3" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="A 4" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="B 1" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="B 2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="B 3" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="B 4" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="C 1" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="C 2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="C 3" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
<td class="UpArrow">-</td>
<td class="DownArrow">+</td>
<td><input value="C 4" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
</table>
you can decide whether to change class using
row.addClass("NameServiceRow");
parentDiv.removeClass("NameServiceRow");
The following should work:
$('body').on('click', '.UpArrow', function(event) {
var row = $(this).closest('tr');
row.insertBefore($(".NameServiceRow")[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow">^</td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">^</td>
<td class="DownArrow"></td>
<td><input value="3" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow NameServiceRow">
<td class="UpArrow">^</td>
<td class="DownArrow"></td>
<td><input value="2" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow inlineService">
<td class="UpArrow">^</td>
<td class="DownArrow"></td>
<td><input value="4" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
<tr class="placeholderRow">
<td class="UpArrow">^</td>
<td class="DownArrow"></td>
<td><input value="5" class="ref" name="ref2" readonly="" type="text"></td>
</tr>
</table>
/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>
variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>
I would like to print this script currency format thousand separator with comma or dot with javascript.
I mean ,for example I would print 1.001,00 instead of 1001
which code should I add for this script ?
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('input').change(function(){
var linetotals = 0;
$('[name^="price"]').each(function(){
price = $(this).parents('tr').find('input').eq(0).val();
quantity = $(this).parents('tr').find('input').eq(1).val();
$(this).val(price*quantity);
linetotals += price*quantity;
});
$('[name=subtotal]').val(linetotals);
});
});
</script>
<form name="invoice form" action="saveToDatabase.java">
<table width="30%" border="1" height="30%">
<tbody>
<tr>
<td colspan="5" align="center">Customer Invoice</td>
</tr>
<tr>
<td width="5%" bgcolor="#CCCCCC">Sn.no.</td>
<td width="25%" bgcolor="#CCCCCC">Item</td>
<td width="25%" bgcolor="#CCCCCC">Unit Price(In $)</td>
<td width="20%" bgcolor="#CCCCCC">Quantity</td>
<td width="25%" bgcolor="#CCCCCC">Line Total<br>(Price * Qnty)</td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">Iphone 5S</td>
<td width="25%"><input value="400" name="unitprice1" size="4" type="text"></td>
<td width="20%"><input name="quantity1" value="2" size="2" type="text"></td>
<td width="25%"><input name="price1" value="400" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">2</td>
<td width="25%">Ipad 2</td>
<td width="25%"><input value="700" name="unitprice2" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity2" value="1" size="2" type="text"></td>
<td width="25%"><input name="price2=" value="700" size="4" type="text"></td>
</tr>
<tr>
<td width="5%">1</td>
<td width="25%">mp3</td>
<td width="25%"><input value="50" name="unitprice1" size="4" disabled="" type="text"></td>
<td width="20%"><input name="quantity1" value="3" size="2" type="text"></td>
<td width="25%"><input name="price1" value="150" size="4" type="text"></td>
</tr>
<tr>
<td colspan="5" align="right">Total<input name="subtotal" value="1250" size="12" disabled="" type="text"></td>
</tr>
</tbody>
</table>
</form>
JSfiddle link
I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)
For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/
Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);
Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.