Javascript calculate() function not working in Firefox and Safari - javascript

I've setup a form that performs certain basic calculations using Calculate() function in Javascript. It has 5 select boxes for QUANTITY, which when you change, the "litres" and "total amount" get updated.
The form works perfect in Chrome and Opera but DOES NOTHING! in Firefox and Safari.
You can check it here – http://jsfiddle.net/bksuru/ajsggpcg/
THE HTML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="60" colspan="5" valign="top"><h2>Variants:</h2></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Flowers:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" type="text" class="input5" id="flpr" tabindex="1" value="MRP 1495.00" readonly="readonly" /></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="flqt" type="text" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></label></td>
<td height="45" align="right"><label>Litres<input name="flowers_litres" type="text" class="input6" id="fllt" tabindex="1" value="0.000" readonly="readonly" /></label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Fruits:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="fruits_size" id="frsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="fuits_price" id="frpr" type="text" class="input5" tabindex="1" value="MRP 1295.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="fruits_quantity" id="frqt" type="text" class="select3" size="1" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="fruit_litres" id="frlt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Plantations:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" id="plpr" type="text" class="input5" tabindex="1" value="MRP 1195.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="plqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="plantations_litres" id="pllt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Vegetables:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="vegetables_size" id="vesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="vegetables_price" id="vepr" type="text" class="input5" tabindex="1" value="MRP 995.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="vegetables_quantity" id="veqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="vegetables_quantity" type="text" class="input6" id="velt" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Cereals:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="cereals_size" id="cesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="cereals_price" id="cepr" type="text" class="input5" tabindex="1" value="MRP 895.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="cereals_quantity" id="ceqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="cereals_litres" id="celt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="total">
<tr>
<td align="left" valign="middle"><label class="variant">Total Amount:<input name="total_amount" type="text" class="input7" id="tamt" tabindex="1" value="MRP 0.00" readonly="readonly" /></label></td>
<td align="right" valign="middle"><input name="Submit" type="button" class="button" value="SUBMIT"/></td>
</tr>
</table>
</tr>
</table>
THE JAVASCRIPT:
function calculate() {
var flowersSize = 200;
var flowersPrice = 1495;
var fruitsSize = 200;
var fruitsPrice = 1295;
var plantationsSize = 200;
var plantationsPrice = 1195;
var vegetablesSize = 200;
var vegetablesPrice = 995;
var cerealsSize = 200;
var cerealsPrice = 895;
var flowersQuantity = flqt.options[flqt.selectedIndex].value;
var fruitsQuantity = frqt.options[frqt.selectedIndex].value;
var plantationsQuantity = plqt.options[plqt.selectedIndex].value;
var vegetablesQuantity = veqt.options[veqt.selectedIndex].value;
var cerealsQuantity = ceqt.options[ceqt.selectedIndex].value;
var flowersLitres = flowersSize * flowersQuantity / 1000;
var fruitsLitres = fruitsSize * fruitsQuantity / 1000;
var plantationsLitres = plantationsSize * plantationsQuantity / 1000;
var vegetablesLitres = vegetablesSize * vegetablesQuantity / 1000;
var cerealsLitres = vegetablesSize * cerealsQuantity / 1000;
flowersLitres = parseFloat(Math.round(flowersLitres * 100) / 100).toFixed(3);
fruitsLitres = parseFloat(Math.round(fruitsLitres * 100) / 100).toFixed(3);
plantationsLitres = parseFloat(Math.round(plantationsLitres * 100) / 100).toFixed(3);
vegetablesLitres = parseFloat(Math.round(vegetablesLitres * 100) / 100).toFixed(3);
cerealsLitres = parseFloat(Math.round(cerealsLitres * 100) / 100).toFixed(3);
fllt.value = flowersLitres;
frlt.value = fruitsLitres;
pllt.value = plantationsLitres;
velt.value = vegetablesLitres;
celt.value = cerealsLitres;
var totalAmount = flowersQuantity * flowersPrice + fruitsQuantity * fruitsPrice + plantationsQuantity * plantationsPrice + vegetablesQuantity * vegetablesPrice + cerealsQuantity * cerealsPrice;
totalAmount = parseFloat(Math.round(totalAmount * 100) / 100).toFixed(2);
tamt.value = "MRP"+" "+totalAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Any help is much appreciated.
Thanks!
BK Suru


You're using the onInput event.
This event is for input and textarea elements. Not select elements.
More specifically
<input type="password">
<input type="search">
<input type="text">
<textarea>
Use onChange event instead.
Apparently some browser do support onInput on other elements but that is not a standard.
Edit (Added example):
<select name="flowers_quantity" ... oninput="calculate()">
Change it to:
<select name="flowers_quantity" ... onchange="calculate()">


just change the method oninput to onchange

Related

How do i create dropdown list and textboxes same id names with the help of index

i created this page.. here in dropdown list i given for all id's name as same..so if i need to select 1st row dropdown then i need to fetch details in next dropdown in same row..but if i selected in last row dropdown its fetching details in 1st row..but i need fetch same row.. can anyone help me.
<tr>
<%-- <td class="td1">${row.index+1}</td> --%>
<td class="td1"><input readonly class="sno" name="sno" id="sno" value="1" size="1"></td>
<td class="td1">
<select name="UserType[]" disabled id="UserType[]" onchange="showUserRole(this.value);" style="width: 130px;">
<option value="CD5306">Doctor</option>
</select>
</td>
<td class="td1">
<select name="UserRole[]" id="UserRole[]" onchange="fetchUsers(this.value);" style="width: 150px;">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${UserRole1}">
<option ${UserRole eq x.ID ? 'selected':''} value="${ x.ID }">${x.VALUE }</option>
</c:forEach>
</select> </td>
<td class="td1">
<select name="Name[]" id="Name[]" onchange="fetchCfms(this.value);" style="width: 150px;" onblur="getIndexValue(this)">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${Name}">
</c:forEach>
</select>
</td>
<td class="td1">
<input type="text" readonly name="cfmsid[]" id="cfmsid[]" value="${cfmsid }" size="10">
</td>
<td class="td1">
<img src="/ASRI/ASRI-images/add1.png" height="30" width="30" onclick="addField(this)" title="Click here to addmore">
<img src="/ASRI/ASRI-images/remove1.png" height="30" width="30" onclick="removeManpower(this)" title="Click here to remove">
</td>
</tr>
<tr>
<%-- <td class="td1">${row.index+1}</td> --%>
<td class="td1"><input readonly class="sno" name="sno" id="sno" value="2" size="1"></td>
<td class="td1">
<select name="UserType[]" id="UserType[]" disabled onchange="showUserRole(this.value);" style="width: 130px;">
<option value="CD5307">Staff Nurse</option>
</select>
</td>
<td class="td1">
<select name="UserRole[]" id="UserRole[]" onchange="fetchUsers(this.value);" style="width: 150px;">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${UserRole2}">
<option ${UserRole eq x.ID ? 'selected':''} value="${ x.ID }">${x.VALUE }</option>
</c:forEach>
</select> </td>
<td class="td1">
<select name="Name[]" id="Name[]" onchange="fetchCfms(this.value);" style="width: 150px;" onblur="getIndexValue(this)">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${Name}">
</c:forEach>
</select>
</td>
<td class="td1">
<input type="text" readonly name="cfmsid[]" id="cfmsid" value="${cfmsid }" size="10">
</td>
<td class="td1">
<img src="/ASRI/ASRI-images/add1.png" height="30" width="30" onclick="addField(this)" title="Click here to addmore">
<img src="/ASRI/ASRI-images/remove1.png" height="30" width="30" onclick="removeManpower(this)" title="Click here to remove">
</td>
</tr>
<tr>
<td class="td1"><input readonly class="sno" name="sno" id="sno" value="3" size="1"></td>
<td class="td1">
<select name="UserType[]" id="UserType[]" disabled onchange="showUserRole(this.value);" style="width: 130px;">
<option value="CD5308">Class IV</option>
</select>
</td>
<td class="td1">
<select name="UserRole[]" id="UserRole[]" onchange="fetchUsers(this.value);" style="width: 150px;">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${UserRole3}">
<option ${UserRole eq x.ID ? 'selected':''} value="${ x.ID }">${x.VALUE }</option>
</c:forEach>
</select> </td>
<td class="td1">
<select name="Name[]" id="Name[]" onchange="fetchCfms(this.value);" style="width: 150px;" onblur="getIndexValue(this)">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${Name}">
</c:forEach>
</select>
</td>
<td class="td1">
<input type="text" readonly name="cfmsid" id="cfmsid" value="${cfmsid }" size="10">
</td>
<td class="td1">
<img src="/ASRI/ASRI-images/add1.png" height="30" width="30" onclick="addField(this)" title="Click here to addmore">
<img src="/ASRI/ASRI-images/remove1.png" height="30" width="30" onclick="removeManpower(this)" title="Click here to remove">
</td>
</tr>
<tr>
<%-- <td class="td1">${row.index+1}</td> --%>
<td class="td1"><input class="sno" readonly name="sno" id="sno" value="4" size="1"></td>
<td class="td1">
<select name="UserType[]" id="UserType[]" disabled onchange="showUserRole(this.value);" style="width: 130px;">
<option value="CD5309">Lab Technician</option>
</select>
</td>
<td class="td1">
<select name="UserRole[]" id="UserRole[]" onchange="fetchUsers(this.value);" style="width: 150px;">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${UserRole4}">
<option ${UserRole eq x.ID ? 'selected':''} value="${ x.ID }">${x.VALUE }</option>
</c:forEach>
</select> </td>
<td class="td1">
<select name="Name[]" id="Name[]" onchange="fetchCfms(this.value);" style="width: 150px;" onblur="getIndexValue(this)">
<option value="-1">------Select------</option>
<c:forEach var="x" items="${Name}">
</c:forEach>
</select>
</td>
<td class="td1">
<input type="text" readonly name="cfmsid" id="cfmsid" value="${cfmsid }" size="10">
</td>
<td class="td1">
<img src="/ASRI/ASRI-images/add1.png" height="30" width="30" onclick="addField(this)" title="Click here to addmore">
<img src="/ASRI/ASRI-images/remove1.png" height="30" width="30" onclick="removeManpower(this)" title="Click here to remove">
</td>
</tr>
anyone have any idea???

toFixed is not a function (javascript)

If you look at my last javascript line | document.book.grandtotal.value= grandTotal. toFixed(2); |
after trying to run my code it gives me an error saying that "grandTotal.toFixed is not a function"
and if I try to remove toFixed it will work just fine. I don't know what's wrong it worked for everything except for this line
function calc()
{quan_1= document.book.quan1.value;
quan_2= document.book.quan2.value;
quan_3= document.book.quan3.value;
quan_4= document.book.quan4.value;
quan_5= document.book.quan5.value;
quan_6= document.book.quan6.value;
quan_7= document.book.quan7.value;
unit_1= document.book.unit1.value;
unit_2= document.book.unit2.value;
unit_3= document.book.unit3.value;
unit_4= document.book.unit4.value;
unit_5= document.book.unit5.value;
unit_6= document.book.unit6.value;
unit_7= document.book.unit7.value;
total_1= document.book.total1.value;
total_2= document.book.total2.value;
total_3= document.book.total3.value;
total_4= document.book.total4.value;
total_5= document.book.total5.value;
total_6= document.book.total6.value;
total_7= document.book.total7.value;
totalPrice1= (unit_1 * quan_1)
document.book.total1.value=totalPrice1 .toFixed(2);
totalPrice2= (unit_2 * quan_2)
document.book.total2.value=totalPrice2 .toFixed(2);
totalPrice3= (unit_3 * quan_3)
document.book.total3.value=totalPrice3 .toFixed(2);
totalPrice4= (unit_4 * quan_4)
document.book.total4.value=totalPrice4 .toFixed(2);
totalPrice5= (unit_5 * quan_5)
document.book.total5.value=totalPrice5 .toFixed(2);
totalPrice6= (unit_6 * quan_6)
document.book.total6.value=totalPrice6 .toFixed(2);
totalPrice7= (unit_7 * quan_7)
document.book.total7.value=totalPrice7 .toFixed(2);
subTotal_= (totalPrice1 + totalPrice2 + totalPrice3 + totalPrice4 + totalPrice5 + totalPrice6 + totalPrice7);
document.book.subTotal.value= subTotal_ .toFixed(2);
taxValue= document.book.county.value;
calcTax= (subTotal_ * taxValue).toFixed(2)
document.book.tax.value= calcTax;
if (document.book.county.value == "0")
{alert("Please select a county");}
if (subTotal_ <= 15)
{shippingCost= "5.5"}
else {shippingCost= 5.5 + (0.0450 * subTotal_)}
document.book.shipping.value= shippingCost .toFixed(2);
grandTotal = (subTotal_ + shippingCost + calcTax );
document.book.grandtotal.value= grandTotal. toFixed(2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<script src = "dynDate.js">
</script>
<script src = "beyond14.js">
</script>
<link rel = "stylesheet" href = "beyond14.css">
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<h6>Last Modified on: "+document.lastModified+"</h6>");
</script>
<main>
<center>
<table>
<form name="book" id="book">
<tr>
<th width="180px" > Cover </th>
<th width="270px"> Title </th>
<th width="200px"> Product Type </th>
<th width="200px"> Quantity </th>
<th width="230px"> Unit Price </th>
<th width="200px"> Total Price </th>
</tr>
<tr>
<td class="align"> <img src="bk_book_woman.jpg" width="120px" height="150px" name="bookwoman" title="bookwoman"> </td>
<td class="align"><input type="text" readonly="readonly" value="The Book Woman of Troublesome Creek" size="36"> </td>
<td class="align"> <select size="1" name="type1" id="type1">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan1" id="quan1"> </td>
<td class="align"> <input type="text" readonly="readonly" value="15.50" name="unit1" id="unit1"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total1" id="total1"> </td>
</tr>
<tr>
<td class="align"> <img src="au_dispatcher.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="The Dispatcher" size="36"> </td>
<td class="align"> <select size="1" name="type2" id="type2">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan2" id="quan2"> </td>
<td class="align"> <input type="text" readonly="readonly" value="12.50" name="unit2" id="unit2"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total2" id="total2"> </td>
</tr>
<tr>
<td class="align"> <img src="dk_gaia.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Dreams of Gaia" size="36"> </td>
<td class="align"> <select size="1" name="type3" id="type3">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan3" id="quan3"> </td>
<td class="align"> <input type="text" readonly="readonly" value="24.99" name="unit3" id="unit3"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total3" id="total3"> </td>
</tr>
<tr> <td class="align"> <img src="bk_goldenInDeath.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Golden in Death" size="36"> </td>
<td class="align"> <select size="1" name="type4" id="type4">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan4" id="quan4"> </td>
<td class="align"> <input type="text" readonly="readonly" value="22.50" name="unit4" id="unit4"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total4" id="total4"> </td>
</tr>
<tr> <td class="align"> <img src="bk_jefferson.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="A Walk Down Historic Jefferson" size="36"> </td>
<td class="align"> <select size="1" name="type5" id="type5">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan5" id="quan5"> </td>
<td class="align"> <input type="text" readonly="readonly" value="13.50" name="unit5" id="unit5"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total5" id="total5"> </td>
</tr>
<tr>
<td class="align"> <img src="puz_millennium.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="The New Millennium" size="36"> </td>
<td class="align"> <select size="1" name="type6" id="type6">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan6" id="quan6"> </td>
<td class="align"> <input type="text" readonly="readonly" value="18.95" name="unit6" id="unit6"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total6" id="total6"> </td>
</tr>
<tr>
<td class="align"> <img src="bk_signs.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Signs & Symbols Sourcebook" size="36"> </td>
<td class="align"> <select size="1" name="type7" id="type7">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan7" id="quan7"> </td>
<td class="align"> <input type="text" readonly="readonly" value="34.95" name="unit7" id="unit7"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total7" id="total7"> </td>
</tr>
<tr> <td>TN County: <select size="1" name="county" id="county">
<option value="0"> Select your county </option>
<option value="0.0925"> Anderson </option>
<option value="0.0875"> Cannon </option>
<option value="0.0950"> Fayette </option>
<option value="0.0800"> Johnson </option>
<option value="0.0975">Williamson </option>
</select>
<td colspan="3" class="alignR"> </td>
<td class="alignR"> SubTotal: </td>
<td class="align"> <input type="text" readonly="readonly" name="subTotal" id="subTotal"> </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> S&H: </td>
<td class="align"> <input type="text" name="shipping" id="shipping" readonly="readonly" </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> Tax: </td>
<td class="align"> <input type="text" name="tax" id="tax" readonly="readonly"> </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> Grand Total: </td>
<td class="align"> <input type="text" readonly="readonly" name="grandtotal" id="grandtotal"> </td> </tr>
<tr>
<td colspan="6" class="align"> <input type="button" class="calc" value="Calculate Order" onclick="calc()"> </tr>
<tr>
<td colspan="6" class="align"> <input type="reset" class="del" value="Cancel Order"> </tr>
</center>
</form>
</main>
</html>

First thing is to remove all spaces in there, between the call of the function and the variables, i hope its just a paste format issue.
Then you have to make sure that you are calling toFixed on a numeric type value, so you can convert to number first, to make sure you are not using it on a string.
so make it like:
Number(someVariable).toFixed()

if (subTotal_ <= 15)
{shippingCost= "5.5"}
"5.5" is a string, not a number. You're trying to add it to two numbers, which changes everything into a string and then call toFixed() on that string (which works only with numbers). Change "5.5" into 5.5 !

As the comments state .toFixed() is method of a Number type and you are attempting to use it on the String type. So, converting your data to a number will solve that issue. This can most easily be done by prepending a + to the string. Here's an example:
var x = "5";
var y = "6";
console.log(x + y); // "56" because of string concatenation
console.log(+x + +y); // 11 because prepending a + converts string to number

Create a dynamic array of JSON Object from values of multiple elements

I need a little help creating a dynamic array of JSON object from the values of different elements. Example is elements below. I have other elements to create the values required for JSON. I didnt want to post 3 lots of same code. So belwo x3
<tr>
<td style="width: 5%"><label>Title:</label></td>
<td><input type="text" class="leds" name="title" style="width:150px"value=""></td><tr>
<td style="width: 5%"><label>Message:</label></td>
<td><input type="text" class="leds" name="message" style="width: 150px" value=""></td><tr>
<td style="width: 5%"><label>IP address:</label></td>
<td><input type="text" class="leds" name="ip_address" style="width:150px" value=""></td>
<td style="width: 5%"><label>Message Colour:</label></td>
<td><select type="text" class="leds" name="led_colour" style="width:150px">
<option value=""></option>
<option value="255,0,0,0">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</td>
</tr>
I can get the values with the following
$.each($('.leds'), function(index, obj) {
console.log(index + ':' + obj.value);
});
What I would like to do is create JSON like below:
[{
"title": "Test1",
"message": "Test1 message",
"ip_address": "1.1.1.1",
"led_colour" : "255,0,0,0"},
{
"title": "Test2",
"message": "Test2 message",
"ip_address": "2.2.2.2",
"led_colour" : "255,0,0,0"},
{
"title": "Test3",
"message": "Test3 message",
"ip_address": "3.3.3.3",
"led_colour" : "255,0,0,0"
}]

A simple way is to loop each tr and get all .leds inputs, get the name of input and it's value an build object, then put it to array. See the code bellow.
var itemsArray = [];
$.each($('tr'), function() {
var item = {};
$(this).find('.leds').each(function(index, obj) {
item[$(obj).attr("name")]=$(obj).val();
});
itemsArray.push(item);
});

I think it's solution, but better need modify your html structure
1) In your case:
function getJson(keys) {
let result = [];
$('.leds').each(function(i) {
let keyIndex = i % keys.length,
key = keys[keyIndex];
if (!keyIndex) {
result.push({});
}
let index = result.length - 1;
result[index][key] = this.value;
})
return result;
}
const jsonData = getJson(['title', 'message', 'ip_address', 'led_colour']);
console.log('jsonData:', jsonData);
2) Try use tbody for group your tr
DEMO in Codepen.io
function getJson() {
let result = [];
$('tbody').each(function() {
let item = {}
$('.leds', this).each(function() {
let $this = $(this);
item[$this.prop('name')] = $this.val();
})
result.push(item);
})
console.log('result:', result)
return result;
}
$(() => {
getJson();
$('button').click(() => {
console.clear();
const jsonData = getJson();
alert(JSON.stringify(jsonData));
})
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get Json Data</button>
<table>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.1" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.2" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.3" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
</table>

How to insert data in database without html form tag

This is my design...
This is my html code...
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div>
<table width="1118" border="0" cellspacing="5">
<tr>
<th width="243" scope="col"><table width="1118" border="0" cellspacing="5">
<tr>
<th width="261" height="27" scope="col"><h4 align="left">Dealer Name:
<input type="text" name="dname" id="dname" />
</h4>
</th>
<th width="243" scope="col">Location:
<input type="text" name="location" id="location" /></th>
<th width="334" scope="col"><div align="left">Purchasing Date:
<select name="day" id="day">
<option value="-1">Day</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month" id="month">
<option value="-1">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select name="year" id="year">
<option value="Year" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select>
</div></th>
<th width="247" scope="col">Entry Date:
<input type="text" name="entry" id="entry" value="<?php echo date("d-M-Y")?>"/>
</th>
</tr>
</table></th>
</tr>
</table>
</div>
<div align="center"></div>
<div align="left">
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add" name="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="847"> </td>
<td width="129"><input name="btn" type="submit" id="btn" value="Sum of Total Price" /></td>
<td width="216"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>
</table>
<div>
<div align="center"><br /><input name="Save" type="submit" value="Save"/>
</div>
</div>
</form>
This is javascript code....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#add').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
// $(this).keyup(function () {
$("#btn").click(function () {
calculateSum();
// $("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.add button.add").click(function () {
id++;
var master = $(this).parents("table.add");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
// prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.add button.remove").live("click", function () {
$(this).parents("tr").remove();
});
$("table.add button.addColumn").click(function () {
var columnName = window.prompt("Enter Column name", "");
$('table').find('th').last().before('<th>'+columnName+'</th>')
$('table').find('tr').each(function () {
$(this).find('td').eq(0).after('<td></td>');
});
});
});
</script>
<script type="text/javascript">
function calculate()
{
var total = document.getElementById('sum').value;
var transport = document.getElementById('transport').value;
if(total=="")
{
total=0;
}
if(transport=="")
{
transport=0;
}
var sum = parseFloat(total)+ parseFloat(transport);
//sum.value= parseFloat(purchase.value)+ parseFloat(transport.value);
if (!isNaN(sum)) {
document.getElementById('grandt').value = sum;
}
}
</script>
This is my php code..
<?php
if(isset($_POST['Save']))
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$day=$_POST['day'];
$month=$_POST['month'];
$year=$_POST['year'];
$date=$day."-".$month."-".$year;
$entry=$_POST['entry'];
foreach($_POST['product'] as $row=>$pro)
{
$folder = "image/";
if($pro!="")
{
$product=$pro;
$brand=$_POST['brand'][$row];
$model=$_POST['model'][$row];
$dprice=$_POST['dprice'][$row];
$quantity=$_POST['quantity'][$row];
$tp=$_POST['txt'][$row];
$quality=$_POST['quality'][$row];
$tmp_name = $_FILES["images"]["tmp_name"][$row];
$name = $_FILES["images"]["name"][$row];
move_uploaded_file($tmp_name, "$folder".$name);
$entry=$_POST['entry'][$row];
//$sum=$_POST['sum'][$row];
//$transport=$_POST['transport'][$row];
//$grand=$_POST['grandt'][$row];
//$image=$_POST['image'][$row];
$sql=mysql_query("INSERT INTO additem (Item_id,Product,Brand,Model,Dprice,Quantity,Tprice,Quality,image) VALUES ('','$product','$brand','$model','$dprice','$quantity','$tp','$quality','$name')");
}
}
if (mysql_query($sql,$con))
{
//die('Error: ' . mysql_error());
echo "1 record added";
}
}
?>
In HTML using form tag clicking save button insert all data into database.But add rows button sum of total button cannot work due to form tag.click those button the page will refreshed. How to solve this problem

set button type as "button" instead of submit...
<input name="btn" type="button" id="btn" value="Sum of Total Price" />

ok i am clarifiying again. this is the code.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<input type="button" value="Update" onclick="myCall()" />
</body>
</html>

Set input type as button not submit
<input name="btn" type="button" id="btn" value="Sum of Total Price" />

try thse codes and edit them the way you want
And let me know where you need an help on kitisaac2001#yahoo.fr
<?php
$cn=mysql_connect('localhost','root','yourpassword');
if ($cn)
{
mysql_select_db('inv',$cn);
}
if(isset($_POST['save']))
{
$name=$_POST['name'];
$location=$_POST['location'];
mysql_query("insert into tbl_order(name,location) VALUES ('$name','$location')");
$id=mysql_insert_id();
for($i = 0; $i<count($_POST['productname']); $i++)
{
mysql_query("INSERT INTO tbl_orderdetail
SET
order_id = '{$id}',
product_name = '{$_POST['productname'][$i]}',
quantity = '{$_POST['quantity'][$i]}',
price = '{$_POST['price'][$i]}',
discount = '{$_POST['discount'][$i]}',
amount = '{$_POST['amount'][$i]}'");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#add').click(function()
{
addnewrow();
});
$('body').delegate('.remove','click',function()
{
$(this).parent().parent().remove();
});
$('body').delegate('.quantity,.price,.discount','keyup',function()
{
var tr=$(this).parent().parent();
var qty=tr.find('.quantity').val();
var price=tr.find('.price').val();
var dis=tr.find('.discount').val();
var amt =(qty * price)-(qty * price *dis)/100;
tr.find('.amount').val(amt);
total();
});
});
function total()
{
var t=0;
$('.amount').each(function(i,e)
{
var amt =$(this).val()-0;
t+=amt;
});
$('.total').html(t);
}
function addnewrow()
{
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+'<td class="no">'+n+'</td>'+'<td><input type="text" class="form-control productname" name="productname[]"></td>'+'<td><input type="text" class="form-control quantity" name="quantity[]"></td>'+'<td><input type="text" class="form-control price" name="price[]"></td>'+'<td><input type="text" class="form-control discount" name="discount[]"></td>'+'<td><input type="text" class="form-control amount" name="amount[]"></td>'+'<td><a href="#" class="remove">Delete</td>'+'</tr>';
$('.detail').append(tr);
}
</script>
</head>
<body>
<form action="" method="POST">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Invoice </h3>
</div>
<div class="box-body">
<div class="form-group">
ReceiptName
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
Location
<input type="text" name="location" class="form-control">
</div>
</div>
<input type="submit" class="btn btn-primary" name="save" value="Save Record">
</div><br/>
<table class="table table-bordered table-hover">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Amount</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td class="no">1</td>
<td><input type="text" class="form-control productname" name="productname[]"></td>
<td><input type="text" class="form-control quantity" name="quantity[]"></td>
<td><input type="text" class="form-control price" name="price[]"></td>
<td><input type="text" class="form-control discount" name="discount[]"></td>
<td><input type="text" class="form-control amount" name="amount[]"></td>
<td><a href="#" class="remove">Delete</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
</tfoot>
</table>
</form>
</body>
</html>
CREATE TABLE tbl_orderdetail (
order_id int,
product_name varchar(255),
quantity varchar(255),
price varchar(255),
discount varchar(255),
amount varchar(255)
)
CREATE TABLE tbl_order (
name varchar(255),
location varchar(255)
)

Checking sum of values for a variable number of html text inputs

I'm building a shopping cart and for each product there are at least 2 colors and five different sizes. When someone orders this product he has to fill in the following form:
<table cellspacing="0">
<thead>
<tr>
<th class="tcl" scope="col">COLOUR/SIZE</th>
<th class="tc2" scope="col">34</th>
<th class="tc3" scope="col">36</th>
<th class="tcr" scope="col">38</th>
<th class="tcr4" scope="col">40</th>
<th class="tcr4" scope="col">42</th>
<th class="tcr4" scope="col">44</th>
<th class="tcr4" scope="col">48</th>
</tr>
</thead>
<tbody>
<tr class="tcl">
<td class="tcl">
<div class="intd">
<div class="tclcon">
<img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-black-mlh-2e299d-pm.jpg" width="20" height="20" border="0" /><br />
black</div>
</div>
</td>
<td class="tc2"><input type="text" name="qty_black_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tc3"><input type="text" name="qty_black_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr"><input type="text" name="qty_black_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_black_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_black_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_black_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_black_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
</tr>
<tr class="tcl">
<td class="tcl">
<div class="intd">
<div class="tclcon">
<img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-powder-mlh-e6847a-pm.jpg" width="20" height="20" border="0" /><br />
powder</div>
</div>
</td>
<td class="tc2"><input type="text" name="qty_powder_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tc3"><input type="text" name="qty_powder_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr"><input type="text" name="qty_powder_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_powder_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_powder_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_powder_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_powder_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
</tr>
<tr class="tcl">
<td class="tcl">
<div class="intd">
<div class="tclcon">
<img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-red-mlh-959b5f-pm.jpg" width="20" height="20" border="0" /><br />
red</div>
</div>
</td>
<td class="tc2"><input type="text" name="qty_red_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tc3"><input type="text" name="qty_red_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr"><input type="text" name="qty_red_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_red_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_red_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_red_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
<td class="tcr4"><input type="text" name="qty_red_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
</tr>
</tbody>
</table>
So my input fields are named following this convention: "qty_" + "color name" + "size".
Which is the easiest way to check if the sum of values of the inputs is at least 3?

It looks like you can just sum all the inputs in the table. Should be:
var total = 0;
$.each($("input"),function(i, obj){
total += parseInt($(obj).val()) || 0;
});
if(total > 2){
return true;
}
return false;
If you've got other pesky fields you can either restrict the set by using .find off the table element, or use a more specific input selector that checks the name:
$("input[name^='qty_']")
EDIT
Had to fix two things. I had obj, i in the rails each order, you want i, obj.
Also, have to handle empty inputs with || 0
See the working JSfiddle here

This will display the sum of all inpust on each row
$( "table tbody tr" ).each( function() {
var sum = 0;
$(this).find( "td:gt(0) input[type=text]" ).each( function() {
sum += $(this).val() * 1;
});
alert(sum)
});

Categories

Resources