JavaScript - Auto Calculate Values
Hi.I have found this nice code through forum.Now I want to modify it a little bit.But dont know how to
It calculates amount column value by multiplying quantity to amount.i.e. amount=qty*rate and gross total is sum of all the array elements in amount.Here I want to add two more columns viz vat% and vat amount.Simply it will be amount*vat% / 100.Can anyone please tell me how I can do that?Other thing is, is it possible to separate the 5% vat and 12.5% vat values and display the total of them in respective column? Here is the link for reference : http://kavisandeepdwivedi.com/forum.php Please go through the code below and help me out Code: <html> <head> <script type="text/javascript"> function tot(elem) { var d=document.getElementById("total").value; var total=Number(d); var e=document.getElementById("vat5").value; var vat5=Number(e); var f=document.getElementById("vat12_5").value; var vat12_5=Number(f); var g=document.getElementById("cash_discount").value; var cash_discount=Number(g); var h=(total+vat5+vat12_5)-cash_discount; document.getElementById("grand_total").value = h; } var total = 0; function getValues() { var qty = 0; var rate = 0; var obj = document.getElementsByTagName("input"); for(var i=0; i<obj.length; i++){ if(obj[i].name == "qty[]"){var qty = obj[i].value;} if(obj[i].name == "rate[]"){var rate = obj[i].value;} if(obj[i].name == "amt[]"){ if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);} else{obj[i].value = 0;total+=(obj[i].value*1);} } } document.getElementById("total").value = total*1; total=0; } </script> <script type="text/javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch(e) { alert(e); } getValues(); } </script> </head> <body> <form name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)"> <tr> <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" > <input type="button" value="Delete Row" onClick="deleteRow('dataTable')" ></td> <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0"> <td width="20"></td> <td width="80" class="forhead" style="white-space:nowrap;">Qty</td> <td width="80" class="forhead" style="white-space:nowrap;">Rate</td> <td width="80" class="forhead" style="white-space:nowrap;">Amount</td> <td width="80" class="forhead" style="white-space:nowrap;">Vat</td> <td width="80" class="forhead" style="white-space:nowrap;">Vat Amount</td> </tr> </table> <table border="0" id="dataTable" width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text"> <tr> <td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td> <td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="qty[]" onkeyup="getValues()" style="width:80px;" onBlur=""></td> <td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td> <td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="amt[]" style="width:80px;" onKeyUp="getValues()"></td> <td width="80" align="right" class="forhead" style="white-space:nowrap;"> <select name="vat[]" style="width:80px" onChange="getValues()"> <option value="0">Select</option> <option value="5">5</option> <option value="12.5">12.5</option> </select> </td> <td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="vat_amt[]" style="width:80px;"></td> </tr> </table> <table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0"> <tr> <td width="20" class="forhead" style="white-space:nowrap;"> </td> <td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td> <td width="80" class="forhead" style="white-space:nowrap;"> </td> <td width="80" class="forhead" style="white-space:nowrap;"> </td> <td width="80" class="forhead" style="white-space:nowrap;"> </td> <td width="80" class="forhead" style="white-space:nowrap;"><input type="text" id="total" name="total[]" style="width:80px;" value=""></td> </tr> <tr> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;">Vat 5%:</td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"><input type="text" name="vat5[]" id="vat5" style="width:80px;"></td> </tr> <tr> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"><input type="text" name="vat12_5[]" id="vat12_5" style="width:80px;"></td> </tr> <tr> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;">Cash Dis :</td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"><input type="text" id="cash_discount" name="cash_discount[]" style="width:80px;" value=""></td> </tr> <tr> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;">Total :</td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"> </td> <td class="forhead" style="white-space:nowrap;"><input type="text" name="grand_total" id="grand_total" onKeyUp="tot()" style="width:80px;"></td> </tr> <tr> <td align="center" colspan="6"> <input name="Submit" type="submit" value="Save" style="text-decoration:none"/> <input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </form> </body> </html> Similar Tutorialshi, can someone help me create an auto pro rata calculator where there are four [4] boxes. first box should be where we could enter the customer's plan [29,39,40 etc.] and it should be divided with what ever i will enter on the second box w/c will be for the number of days in a month [28,29,30,31]. the 3rd box should be where i can enter the number of days the cust. was able to use the service and it needs to be multiplied from box 2. 4th box should be a read only box where the pro rata will be displayed. so: [box 1] divided "/" by [box 2] multiplied "*" by [box 3] equals "=" to box four thanks!!! Hi, I am thinking of how to write the code for this: There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes. So...can anyone give me any references to this? Thanks. Hi all... i need to auto calculate 3 fields and store the result in 2 fields: field 3 = field 1 * field 2 field 5 = (field 1 * field 2) - field 4 or field 3 - field 4 so far i'm trying to modify an existing code but i'm still can't get it working correcly Code: <html> <head> <script type="text/javascript"> function compute(inputObj, otherInputID, multiID, subID, diffID) { var otherObj = document.getElementById(otherInputID) var multiObj = document.getElementById(multiID) var subObj = document.getElementById(subID) var diffObj = document.getElementById(diffID) var v1=inputObj.value var v2=otherObj.value var v3=multiObj.value var v4=subObj.value var val1 = v1=="" ? 0 : parseFloat(v1) // convert string to float var val2 = v2=="" ? 0 : parseFloat(v2) var val3 = v3=="" ? 0 : parseFloat(v3) var val4 = v4=="" ? 0 : parseFloat(v4) multiObj.value = val1 * val2 diffObj.value = (val1 * val2)-val4 } </script> </head> <body> Value 1: <input id="txt1" type="text" onKeyUp="compute(this, 'txt2', 'addres', 'subtract', 'mulres')"> <br /> Value 2: <input id="txt2" type="text" onKeyUp="compute(this, 'txt1', 'addres', 'subtract', 'mulres')"> <br /> Added Result: <input id="addres" type="text"> <br /> substract: <input id="subtract" type="text" onKeyUp="compute('txt1', 'txt2', 'addres', this, 'mulres')"> <br /> Multiplied Result: <input id="mulres" type="text"> </body> </html> my problem is the Multiplied Result field not automatically change the result when i enter value in subtract field. it will change if i retype the value in field 1 and 2. Hope somebody can help me. Thank in advance Hi... I just want to know if it is possible to have an autocalculate in a textboxes inside while loop?and if it is possible how?.. here is my code: Code: <html> <head> <style type="text/css"> #fieldset_PS{ position: relative; width: 20%; } </style> <link rel="stylesheet" type="text/css" href="kanban.css" /> <script type="text/javascript"> function display_PS(){ document.loading_kanban.action="ParameterSettings.php"; document.loading_kanban.submit(); } function display_Kanban(){ document.loading_kanban.action="kanban_report.php"; document.loading_kanban.submit(); } </script> </head> <?php error_reporting(0); $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <form name="loading_kanban"> <div id="main_button"> <center> <!--<label style="margin-left: .9em; font-family: Arial, Helvetica, sans-serif; font-size: .7em;">Display Details:</label><input onclick='showDetails(this);' id='chkDetail' type='checkbox' checked='checked' value='wip'/> --> <input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()"> <input type="button" name="parameter_settings" value="Stock Requisition"> <input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()"> </div> <div id="fieldset_PS"> <fieldset> <legend>Parameter Settings</legend> </center> <table border="1"> <th>Compounds</th> <th>Max</th> <th>Min</th> <?php $sql = "SELECT PCODE FROM parameter_settings ORDER BY PCODE ASC"; $result = mysql_query($sql, $con); while ($row = mysql_fetch_assoc($result)){ echo "<tr> <td>$row[PCODE]</td> <td><input type = 'text' name = 'max_pcode' size = '10'></td> <td><input type = 'text' name = 'min_pcode' size = '10'></td> </tr>"; } ?> </fieldset> </table> </div> </form> </html> I have table : parameter settings and i have fields: PCODE, max, min PCODE has data: PXX PYY PZZ PAA PBB Total I just want to know how can I auto calculate the total max and total min and it will display in the textbox beside Total... Thank you Hi.. I have syntax for autocalculate the max lot and the output display in Total_max same with min lot and the output display in Totam_min, now I need to have convert automatically the number I was inputted in max lot textbox and it will display in max doz textbox same also with min lot convert to min doz textbox. the conversion is: max doz = max lot * 10 min doz = min lot * 10 here is my code: Code: <html> <head> <link rel="stylesheet" type="text/css" href="kanban.css" /> <script type="text/javascript"> function display_PS(){ document.loading_kanban.action="ParameterSettings.php"; document.loading_kanban.submit(); } function display_Kanban(){ document.loading_kanban.action="kanban_report.php"; document.loading_kanban.submit(); } </script> <script type="text/javascript"> //Code for auto calculate Total Max// function autocalearn(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, Total_max = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { Total_max += val; //accumulate } } oForm.Total_max.value = Total_max.toFixed(2); //out } </script> <script type="text/javascript"> //Code for auto calculate Total Min// function autocalmin(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, Total_min = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { Total_min += val; //accumulate } } oForm.Total_min.value = Total_min.toFixed(2); //out } </script> </head> <form name="loading_kanban"> <div id="main_button"> <center> <!--<label style="margin-left: .9em; font-family: Arial, Helvetica, sans-serif; font-size: .7em;">Display Details:</label><input onclick='showDetails(this);' id='chkDetail' type='checkbox' checked='checked' value='wip'/> --> <input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()"> <input type="button" name="parameter_settings" value="Stock Requisition"> <input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()"> </center> </div> <div id="fieldset_PS"> <center> <table border="1"> <th>Compounds</th> <th>Max</th> <th>UOM</th> <th>Max</th> <th>UOM</th> <th>Min</th> <th>UOM</th> <th>Min</th> <th>UOM</th> <tr> <td><label id="P27" name="P27" size="6" style="text-align: center;">P27</label></td> <td><input type="text" name="P27_max" id="P27_max" size="6" onkeyup="return autocalearn(this, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P27LOT_max" name="P27LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P27_maxdoz" id="P27_maxdoz" size="6"></td> <td><label id="P27Doz_max" name="P27Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P27_min" id="P27_min" size="6" onkeyup="return autocalmin(this, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P27LOT_min" name="P27LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P27_mindoz" id="P27_mindoz" size="6"></td> <td><label id="P27Doz_min" name="P27Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P28" name="P28" size="6">P28</label></td> <td><input type="text" name="P28_max" id="P28_max" size="6" onkeyup="return autocalearn(this, P27_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P28LOT_max" name="P28LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P28_maxdoz" id="P28_maxdoz" size="6"></td> <td><label id="P28Doz_max" name="P28Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P28_min" id="P28_min" size="6" onkeyup="return autocalmin(this, P27_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P28LOT_min" name="P28LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P28_mindoz" id="P28_mindoz" size="6"></td> <td><label id="P28Doz_min" name="P28Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P30" name="P30" size="6">P30</label></td> <td><input type="text" name="P30_max" id="P30_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P30LOT_max" name="P30LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P30_maxdoz" id="P30_maxdoz" size="6"></td> <td><label id="P30Doz_max" name="P30Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P30_min" id="P30_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P30LOT_min" name="P30LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P30_mindoz" id="P30_mindoz" size="6"></td> <td><label id="P30Doz_min" name="P30Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P32W" name="P32W" size="6">P32W</label></td> <td><input type="text" name="P32W_max" id="P32W_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P32WLOT_max" name="P32WLOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P32W_maxdoz" id="P32W_maxdoz" size="6"></td> <td><label id="P32WDoz_max" name="P32WDoz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P32W_min" id="P32W_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P32WLot_min" name="P32WLot_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P32W_mindoz" id="P32W_mindoz" size="6"></td> <td><label id="P32WDoz_min" name="P32WDoz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P33" name="P33" size="6">P33</label></td> <td><input type="text" name="P33_max" id="P33_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P33LOT_max" name="P33LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P33_maxdoz" id="P33_maxdoz" size="6"></td> <td><label id="P33Doz_max" name="P33Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P33_min" id="P33_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P33LOT_min" name="P33LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P33_mindoz" id="P33_mindoz" size="6"></td> <td><label id="P33Doz_min" name="P33Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P35" name="P35" size="6">P35</label></td> <td><input type="text" name="P35_max" id="P35_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P35LOT_max" name="P35LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35_maxdoz" id="P35_maxdoz" size="6"></td> <td><label id="P35Doz_max" name="P35Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P35_min" id="P35_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P35LOT_min" name="P35LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35_mindoz" id="P35_mindoz" size="6"></td> <td><label id="P35Doz_min" name="P35Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P35M" name="P35M" size="6">P35M</label></td> <td><input type="text" name="P35M_max" id="P35M_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P35MLOT_max" name="P35MLOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35M_maxdoz" id="P35M_maxdoz" size="6"></td> <td><label id="P35MDoz_max" name="P35MDoz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P35M_min" id="P35M_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P35MLOT_min" name="P35MLOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35M_mindoz" id="P35M_mindoz" size="6"></td> <td><label id="P35MDoz_min" name="P35MDoz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P35W" name="P35W" size="6">P35W</label></td> <td><input type="text" name="P35W_max" id="P35W_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P35WLOT_max" name="P35WLOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35W_maxdoz" id="P35W_maxdoz" size="6"></td> <td><label id="P35WDoz_max" name="P35WDoz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P35W_min" id="P35W_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P35WLOT_min" name="P35WLOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P35W_mindoz" id="P35W_mindoz" size="6"></td> <td><label id="P35WDoz_min" name="P35WDoz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P38" name="P38" size="6">P38</label></td> <td><input type="text" name="P38_max" id="P38_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P38LOT_max" name="P38LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P38_maxdoz" id="P38_maxdoz" size="6"></td> <td><label id="P38Doz_max" name="P38Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P38_min" id="P38_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P38LOT_min" name="P38LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P38_mindoz" id="P38_mindoz" size="6"></td> <td><label id="P38Doz_min" name="P38Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P41" name="P41" size="6">P41</label></td> <td><input type="text" name="P41_max" id="P41_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P42_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P41LOT_max" name="P41LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P41_maxdoz" id="P41_maxdoz" size="6"></td> <td><label id="P41Doz_max" name="P41Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P41_min" id="P41_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P42_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P41LOT_min" name="P41LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P41_mindoz" id="P41_mindoz" size="6"></td> <td><label id="P41Doz_min" name="P41Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P42" name="P42" size="6">P42</label></td> <td><input type="text" name="P42_max" id="P42_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P43_max, P45_max, P46_max, P47_max)"></td> <td><label id="P42LOT_max" name="P42LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P42_maxdoz" id="P42_maxdoz" size="6"></td> <td><label id="P42Doz_max" name="P42Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P42_min" id="P42_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P43_min, P45_min, P46_min, P47_min)"></td> <td><label id="P42LOT_min" name="P42LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P42_mindoz" id="P42_mindoz" size="6"></td> <td><label id="P42Doz_min" name="P42Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P43" name="P43" size="6">P43</label></td> <td><input type="text" name="P43_max" id="P43_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P45_max, P46_max, P47_max)"></td> <td><label id="P43LOT_max" name="P43LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P43_maxdoz" id="P43_maxdoz" size="6"></td> <td><label id="P43Doz_max" name="P43Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P43_min" id="P43_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P45_min, P46_min, P47_min)"></td> <td><label id="P43LOT_min" name="P43LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P43_mindoz" id="P43_mindoz" size="6"></td> <td><label id="P43Doz_min" name="P43Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P45" name="P45" size="6">P45</label></td> <td><input type="text" name="P45_max" id="P45_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P46_max, P47_max)"></td> <td><label id="P45LOT_max" name="P45LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P45_maxdoz" id="P45_maxdoz" size="6"></td> <td><label id="P45Doz_max" name="P45Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P45_min" id="P45_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P46_min, P47_min)"></td> <td><label id="P45LOT_min" name="P45LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P45_mindoz" id="P45_mindoz" size="6"></td> <td><label id="P45Doz_min" name="P45Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P46" name="P46" size="6">P46</label></td> <td><input type="text" name="P46_max" id="P46_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P47_max)"></td> <td><label id="P46LOT_max" name="P46LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P46_maxdoz" id="P46_maxdoz" size="6"></td> <td><label id="P46Doz_max" name="P46Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P46_min" id="P46_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P47_min)"></td> <td><label id="P46LOT_min" name="P46LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P46_mindoz" id="P46_mindoz" size="6"></td> <td><label id="P46Doz_min" name="P46Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="P47" name="P47" size="6">P47</label></td> <td><input type="text" name="P47_max" id="P47_max" size="6" onkeyup="return autocalearn(this, P27_max, P28_max, P30_max, P32W_max, P33_max, P35_max, P35M_max, P35W_max, P38_max, P41_max, P42_max, P43_max, P45_max, P46_max)"></td> <td><label id="P47LOT_max" name="P47LOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P47_maxdoz" id="P47_maxdoz" size="6"></td> <td><label id="P47Doz_max" name="P47Doz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="P47_min" id="P47_min" size="6" onkeyup="return autocalmin(this, P27_min, P28_min, P30_min, P32W_min, P33_min, P35_min, P35M_min, P35W_min, P38_min, P41_min, P42_min, P43_min, P45_min, P46_min)"></td> <td><label id="P47LOT_min" name="P47LOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="P47_mindoz" id="P47_mindoz" size="6"></td> <td><label id="P47Doz_min" name="P47Doz_min" size="3" style="text-align: left;">Doz</label></td> </tr> <tr> <td><label id="Total" name="Total" size="6"><b>Total</b><label></td> <td><input type="text" name="Total_max" id="Total_max" size="6"></td> <td><label id="TotalLOT_max" name="TotalLOT_max" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="Total_maxdoz" id="Total_maxdoz" size="6"></td> <td><label id="TotalDoz_max" name="TotalDoz_max" size="3" style="text-align: left;">Doz</label></td> <td><input type="text" name="Total_min" id="Total_min" size="6"></td> <td><label id="TotalLOT_min" name="TotalLOT_min" size="3" style="text-align: left;">Lot</label></td> <td><input type="text" name="Total_mindoz" id="Total_mindoz" size="6"></td> <td><label id="TotalDoz_min" name="TotalDoz_min" size="3" style="text-align: left;">Doz</label></td> </tr> </table> </center> </div> <div id="footer_button"> <input type="button" name="SAVE" value="SAVE" style="width: 25%;"> <input type="button" name="CANCEL" value="CANCEL"> </div> </form> </html> I attach the sample imge of my webpage. I am trying to create a simple auto-calculate function for a webpage. What should be happening: The 'onchange' command should pass the 'price' of the item to the function, the function should then cycle through all the dropdowns (or checkboxes or fields) and calculate the total. What is happening: It is only picking up the last checkbox. It seems that the 'for' loop only remembers the last item in the array. What am I doing wrong? How can I get the code to remember all the items? thanks, Code: <script language="JavaScript" type="text/javascript"> function calculateTotal(price) { var total = 0; var cList = ['sel1','sel2','sel3']; for (i=0;i<2;i++); var select = GetE(cList[i]); total+= price * (select.options[select.selectedIndex].value); GetE("totalShow").innerHTML = total.toFixed(2); } function GetE(id) {return document.getElementById(id); } </script> <html> <head></head><body> <form id="form1" name="form1" method="post" action=""> <select name="sel1" id="sel1" onchange="calculateTotal(100)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select><br><br> <select name="sel2" id="sel2" onchange="calculateTotal(200)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select><br><br> <select name="sel3" id="sel3" onchange="calculateTotal(300)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select><br><br> </form> <br>total <span id="totalShow">0.00</span> </body></html> Hi, I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount. I also need to add the item number when a new row is added. Can any1 help? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>untitled</title> <script type="text/javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </script> </head> <body > <form action="#" id="calcForm" method="post"> <table border="0" width="680" cellpadding="0" cellspacing="0"> <tr> <td width="60" align="left" valign="top"><b>Item No</b></td> <td width="3"> </td> <td width="290" align="left" valign="top"><b>Description</b></td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Part No.</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"><b>QTY</b></td> <td width="3"> </td> <td width="63" align="left" valign="top"><b>Cost</b></td> </tr> </table> <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0"> <tr> <td width="60" align="left" valign="top"><INPUT type="checkbox" name="chk"/> <b>1</b></td> <td width="3"> </td> <td width="290" align="left" valign="top"> <input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc'][$x]?>"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"> <input type="text" name="partno[]" size="30" value="<?=$info['partno'][$x]?>"> </td> <td width="3"> </td> <td width="50" align="left" valign="top"> <input type="text" name="qty[]" size="2" value="<?=$info['qty'][$x]?>"> </td> <td width="3"> </td> <td width="63" align="left" valign="top"> <input type="text" name="cost[]" size="4" value="<?=$info['cost'][$x]?>"> </td> </tr> </table> <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0"> <tr> <td width="60" align="left" valign="top"> </td> <td width="3"> </td> <td width="290" align="left" valign="top"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Sub Total</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </td> <td width="63" align="left" valign="top"> <input type="text" name="subtotal" size="4" value="<?=$info['subtotal']?>"> </td> </tr> <tr> <td width="60" align="left" valign="top"> </td> <td width="3"> </td> <td width="290" align="left" valign="top"><INPUT type="button" value="Add Row" onclick="addRow('parts')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('parts')" /></td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Service Charge</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </td> <td width="63" align="left" valign="top"> <input type="text" name="charge" size="4" value="<?=$info['charge']?>"> </td> </tr> <tr> <td width="60" align="left" valign="top"> </td> <td width="3"> </td> <td width="290" align="left" valign="top"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Grand Total</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </td> <td width="63" align="left" valign="top"> <input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>"> </td> </tr> </table> </form> </body> </html> I have the following code working with the checkbox options but once I added a drop down menu with values, it doesn't calculate it. I've done some different things to try to add the drop down to the function but nothing would work that I've tried so far. I have it setup so when a box is unchecked, that option is taken off the price, the drop down should do the same to switch between the options price. Thanks for the help! Code: <script language="javascript"> totalOptions = 0; function calculateTotalOptions(thisCheckbox){ if (thisCheckbox.checked) { totalOptions += parseFloat(thisCheckbox.value); } else { totalOptions -= parseFloat(thisCheckbox.value); } document.getElementById("totalOptions").value = "$" + totalOptions + ".00"; } </script> <form name="Options" > <table width="765" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="8" align="center" bgcolor="#FFFFFF">Please select which model you would like to price and then add your optional equipment.</td> <td width="4" align="center" bgcolor="#FFFFFF"> </td> <td width="4" align="center" bgcolor="#FFFFFF"> </td> <td width="4" align="center" bgcolor="#FFFFFF"> </td> </tr> <tr> <td colspan="3" align="center" bgcolor="#FFFFFF"><strong>Available on these models</strong></td> <td width="85" align="center" bgcolor="#FFFFFF">Most Popular Options</td> <td width="97" align="center" bgcolor="#FFFFFF">Option Code</td> <td width="192" align="center" bgcolor="#FFFFFF"><strong>Optional Equipment</strong></td> <td width="61" align="center" bgcolor="#FFFFFF"><strong>Price</strong></td> <td width="149" align="center" bgcolor="#FFFFFF"><strong>Add Option</strong></td> </tr> <tr> <td width="58" align="center"><p><strong>SR 125<br /> </strong></p></td> <td width="58" align="center"><p><strong>SR 225<br /> </strong></p></td> <td width="58" align="center"><p><strong>SR 325<br /> </strong></p></td> <td colspan="5" align="right"><strong>Select Base Model: </strong> <select name="model" id="model"> <option value="0.00" selected onclick="calculateTotalOptions(this);">--------</option> <option value="-6995.00" onclick="calculateTotalOptions(this);">SR 125 Standard</option> <option value="-7495.00" onclick="calculateTotalOptions(this);">SR 125 H.D.</option> <option value="7995.00" onclick="calculateTotalOptions(this);">SR 125 S.D.</option> <option value="8495.00" onclick="calculateTotalOptions(this);">SR 225 Standard</option> <option value="8995.00" onclick="calculateTotalOptions(this);">SR 225 H.D.</option> <option value="9595.00" onclick="calculateTotalOptions(this);">SR 225 S.D.</option> <option value="9995.00" onclick="calculateTotalOptions(this);">SR 325 Standard</option> <option value="10495.00" onclick="calculateTotalOptions(this);">SR 325 H.D.</option> <option value="10995.00" onclick="calculateTotalOptions(this);">SR 325 S.D.</option> </select></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF">SR-ES</td> <td bgcolor="#FFFFFF">•Electric start </td> <td bgcolor="#FFFFFF">$345.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="345.00" onclick="calculateTotalOptions(this);"> </td> </tr> <tr> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"> </td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td>SR-OCP</td> <td>•Operator convience package; includes tach, hour, lube meter, hydraulic pressure gauge and bottle holder</td> <td>$125.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="125.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"> </td> <td align="center" bgcolor="#FFFFFF"> </td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-EZM</td> </table></td> <td bgcolor="#FFFFFF">•EZ maintance hydraulic package; includes temperature and fill sight guage and quickdrain ball valve</td> <td bgcolor="#FFFFFF">$100.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="100.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"> </td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-6W</td> </table></td> <td>•Six way wedge with on board storage</td> <td>$495.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"> </td> <td align="center" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-JLL</td> </table></td> <td bgcolor="#FFFFFF">•Jointed log lift</td> <td bgcolor="#FFFFFF">$495.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"> </td> <td align="center"> </td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-SEGTR</td> </table></td> <td>•Segmented tire for spotting includes spotting hitch</td> <td>$350.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="350.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"> </td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-MGST</td> </table></td> <td bgcolor="#FFFFFF">•Motor guard with saddle for segmented tire</td> <td bgcolor="#FFFFFF">$95.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="95.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"> </td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-MG</td> </table></td> <td>•Motor guard w/o saddle</td> <td>$75.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="75.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-SPRTR</td> </table></td> <td bgcolor="#FFFFFF">•Spare tire and holder</td> <td bgcolor="#FFFFFF">$250.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="250.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td> </td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-HOC</td> </table></td> <td>•Hydraulic oil cooler</td> <td>$795.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="795.00" onclick="calculateTotalOptions(this);"> </td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-GRLP</td> </table></td> <td bgcolor="#FFFFFF">•Grip Rightâ„¢ log points (each additional point)</td> <td bgcolor="#FFFFFF">$20.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="20.00" onclick="calculateTotalOptions(this);"> </td> </tr> <tr> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td> </td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-HDF</td> </table></td> <td>•Heavy duty fenders</td> <td>$145.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="145.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center" bgcolor="#FFFFFF"><p><img src="dot.png" alt="" width="11" height="11" /></p></td> <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td> <td bgcolor="#FFFFFF"> </td> <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0"> <td width="127">SR-LP</td> </table></td> <td bgcolor="#FFFFFF">•Light package</td> <td bgcolor="#FFFFFF">$195.00</td> <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="195.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td> <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td> <td> </td> <td><table cellspacing="0" cellpadding="0"> <td width="127">SR-38LO</td> </table></td> <td>•38" log opening *includes 2 1/2" cylinder rod </td> <td>$995.00</td> <td align="center"><input type="checkbox" name="t1" id="t1" value="995.00" onclick="calculateTotalOptions(this);"></td> </tr> <tr> <td colspan="8" align="center" bgcolor="#FFFFFF"> </td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"> </td> <td> </td> <td> </td> <td> </td> <td><strong>TOTAL:</strong></td> <td><input type="text" id="totalOptions" readonly> </td> </tr> </table> </form> I am having trouble with figuring a way to set my loop up to reset values of the different coin values. Example, when I put in 78, and click calculate, it tells you how much of each coin would be given back. My problem is that I set it up and run it, but when I put different values in back to back to calculate, some of the fields don't reset. I just need some ideas or logic behind what I need to do. Code: var change_out = function(){ do { var money = document.getElementById("cents").value; if (money >= 25) { var quarters = parseInt(money / 25); var foo = parseInt(money - (quarters * 25)); document.getElementById("quarters").value = quarters; if (foo >= 10) { var left = parseInt(foo / 10); var wow = parseInt(foo - (left * 10)); document.getElementById("dimes").value = left; if(wow==0)return; if (wow >= 5) { var dumb = parseInt(wow / 5); var pop = parseInt(wow - (dumb * 5)); document.getElementById("nickels").value = dumb; document.getElementById("pennies").value = pop; }else{document.getElementById("pennies").value = wow;} }else if (foo >= 5){ var dumb = parseInt(foo / 5); var pop = parseInt(foo - (dumb * 5)); document.getElementById("nickels").value = dumb; document.getElementById("pennies").value = pop; }else{document.getElementById("pennies").value = foo;} }else if (money >= 10){ var left = parseInt(money / 10); var wow = parseInt(money - (left * 10)); document.getElementById("dimes").value = left; if (wow > 5){ var dumb = parseInt(wow / 5); var pop = parseInt(wow - (dumb * 5)); document.getElementById("nickels").value = dumb; document.getElementById("pennies").value = pop; document.getElementById("quarters").value = ""; }else{document.getElementById("pennies").value = wow;} }else if (money >= 5){ var dumb = parseInt(money / 5); var pop = parseInt(money - (dumb * 5)); document.getElementById("nickels").value = dumb; document.getElementById("pennies").value = pop; document.getElementById("quarters").value = ""; document.getElementById("dimes").value = ""; }else{ document.getElementById("pennies").value = money; document.getElementById("quarters").value = ""; document.getElementById("dimes").value = ""; document.getElementById("nickels").value = ""; } }while(isNaN(money))} Need help please asap. It might be simple but i couldn't work out the script. help! ---------------- Formfield.anzahl1 = number entered by customer Formfield.Price1 = Ergebnisfeld1 e.g. Anzahl1= 1 Price = 270 *if Anzahl1 = 2 then Price = 270*2 I need to do this for two form option. 2nd field would be as follows Formfield.Anzahl2= number entered by customer Formfield.Price2 = Ergebnisfeld2 Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2 ------------------- How can I convert these above to javascript? Good day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript"> function autocalearn(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, TotEarn = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { TotEarn += val; //accumulate } } var tot=Number(TotEarn) + Number(document.getElementById('Amount').value); oForm.TotEarn.value = tot.toFixed(2); //oForm.TotEarn.value = TotEarn.toFixed(2); //out } </script> <!--Total Deduction AutoCompute--> <script type="text/javascript" language="javascript"> function autocalded(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, TotalDed = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { TotalDed += val; //accumulate } } //oForm.TotalDed.value = TotalDed.toFixed(2); //out var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value); oForm.TotalDed.value = totded.toFixed(2); } </script> and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code: <html> <table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> <tr><td id="leftcolumn" width="170" align="left" valign="top"> <div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> <a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br /> <a rel="nofollow" target="_top" href="between.htm" >Between Days</a> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var cal1, cal2; window.onload = function () { cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1')); cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; /*............*/ function confirmation(f) { var startdate = f.fromdate.value var enddate = f.todate.value var myday=new Date() var yr=myday.getFullYear() var mn=myday.getMonth()+1 var dt=myday.getDate() var today="" var present, ys, ms, ds, ye,me,de, start, end if(mn < 10) { mn = "0" + mn } if(dt <10) { dt = "0" + dt } today= yr + "/" + mn + "/" + dt present=yr + "/" + mn + "/" +dt if (today < startdate ) { alert (" Start date should not be exceed to-day's date " + present ) startdate.focus() return false } if (today < enddate ) { alert (" End date should not be exceed to-day's date " + present ) enddate.focus() return false } if (today == startdate ) { alert(" You are selected to-days date as Starting day" ); } var answer = confirm("Do you want to continue ?") if (answer) { if( startdate < enddate) alert("Dates between " + startdate + " to " + enddate + " are confirmed" ) else alert("Dates between " + enddate + " to " + startdate + " are confirmed" ) } else { alert("Date not confirmed") window.location="to_date.htm"; } ys= startdate.substring(0,4); ms= startdate.substring(5,7); ds= startdate.substring(8,10); start=ys + "" + ms + "" +ds ye= enddate.substring(0,4); me= enddate.substring(5,7); de= enddate.substring(8,10); end=ye + "" + me + "" +de } /*.......................................................*/ </script> <div style="margin-left:100px;"> <body> <style type="text/css"> #conf { margin-left:115px; } </style> <td align="left" valign="top"> <table width="100" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:0px"> </table> <h4>From Date</h4> <form name= "formbet" id="placeholder" method="post" action="#" > <input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/> <td align="left" valign="top"> <table width="300" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:20px"> <h4>To Date</h4> <input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br /> <input id="conf" type="button" onclick="confirmation(this.form)" value="Submit"> </form> </body> </html> In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. hi, I've got a problem and i really need help. this is my code <script> var y= new Date(); y.getFullYear() + '<br />'; alert(y); var year = new Date(); year.setFullYear(prompt('Enter the year','1990'),prompt('Enter the month','1'), prompt('Enter the day','1')); alert(year); var yy = y-year; alert(yy); </script> i want when a user write his/her birthday JS calculate the age. that's all I want to do a calculation between selectbox values. The problem with my code is that the first part of the calculation only gives me 0, which Motherboard value*quantity. the second part works fine which Chassis*quantity. My formulas is motherbord*Quanity+chassis*quantity. Code: function calculate() { var parsedMotherboard = parseFloat(document.calcform.Motherboard.value || 0); var parsedQuantity = parseFloat(document.calcform.Quantity.value || 0); var parsedChassis = parseFloat(document.calcform.Chassis.value || 0); var parsedQuantity1 = parseFloat(document.calcform.Quantity1.value ||0); document.calcform.total.value = (parsedMotherboard * parsedQuantity + parsedChassis * parsedQuantity1); } PHP Code: echo "<tr><td align='left' width='90%'>"; $result = mysql_query("SELECT Motherboard_Part_Number, Motherboard_Name, Motherboard_Price FROM Motherboard ") or die(mysql_error()); echo '<select id="Motherboard" class="SelectClass" name="Motherboard" ONCHANGE="calculate()">'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result )) { // Print out the contents of each row into a table echo '<option Name="Motherboard" value= ',$row['Motherboard_Price'],'>',$row['Motherboard_Part_Number'],' ',$row['Motherboard_Name'],' $',$row['Motherboard_Price'],' ','</option>'; } echo '</select>'; echo "</td>"; echo "<td align='right' width='10%'>"; $result= mysql_query("SELECT Number FROM Quantity") or die(mysql_error()); echo '<select id="Quantity" class="SelectClass" name="Quantity" Value="Quantity" ONCHANGE="calculate()" >'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result)) { // Print out the contents of each row into a table echo '<option value=',$row['Number'],'>',$row['Number'],'</option>'; } echo '</select>'; echo "</td></tr>"; echo "<tr><td align='left' width='90%'>"; $result = mysql_query("SELECT Chassis_Part_Number, Chassis_Name, Chassis_Price FROM Chassis where Chassis_Form_Factor='ATX'") or die(mysql_error()); echo '<select id="Chassis" class="SelectClass" name="Chassis" ONCHANGE="calculate()">'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result )) { // Print out the contents of each row into a table echo '<option Name="Chassis" value= ',$row['Chassis_Price'],'>',$row['Chassis_Part_Number'],' ',$row['Chassis_Name'],' $',$row['Chassis_Price'],' ','</option>'; } echo '</select>'; echo "</td>"; echo "<td align='right' width='10%'>"; $result= mysql_query("SELECT Number FROM Quantity") or die(mysql_error()); echo '<select id="Quantity" class="SelectClass" name="Quantity1" Value="Quantity" ONCHANGE="calculate()" >'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result)) { // Print out the contents of each row into a table echo '<option value=',$row['Number'],'>',$row['Number'],'</option>'; } echo '</select>'; echo "</td></tr>"; hi, i need a help for experts out there. i've a set of questionnaire with 10 questions.answer for each question to choose from is 0-6 using radio button.for all the questions answered i need to calculate overall percentage based on the scores. i've done the html coding but having problem with javascript..is there any websites i can refer to write a coding or anyone can give example how to do it. pls help.. I have tried many time to make the calculation to appear at the total text box. however, I fail to find where the problem is. Please help me.. here is my coding.. <html> <head> <title> PRESENTATION EVALUATION FORM </title></head> <style type="text/css"> .style1 { text-align: center; } </style> <script type="text/javascript"> function add($g1,$g2,$g3,$g4,$g5,$g6,$g7,$g8,$g9,$g10,$g11,$g12,$g13) { $g1=$_POST['document.myForm.gred1.value']; $g2=$_POST['gred3.value']; $g3=$_POST['gred3.value']; $g4=$_POST['gred4.value']; $g5=$_POST['gred5.value']; $g6=$_POST['gred6.value']; $g7=$_POST['gred7.value']; $g8=$_POST['gred8.value']; $g9=$_POST['gred9.value']; $g10=$_POST['gred10.value']; $g11=$_POST['gred11.value']; $g12=$_POST['gred12.value']; $g13=$_POST['gred13.value']; $total=$g1+$g2+$g3+$g4+$g5+$g6+$g7+$g8+$g9+$g10+$g11+$g12+$g13; } </script> <body> <center><img src="logo.gif" height="200" weight="240"></center> <p><center><b>FAKULTI SISTEM KOMPUTER & KEJURUTERAAN PERISIAN<br>UNIVERSITI MALAYSIA PAHANG</b></center></p> <table width="100% "border="1"> <form name="myForm" method="post"> <tr> <th style="width: 447px">ITEM</th> <th style="width: 340px">SCORE</th> </tr> <tr> <td style="width: 447px"> A) SLIDES</td> <td style="width: 340px"> </td> </tr> <tr> <td style="width: 447px"> i. Use of Diagram and Animations </td> <td style="width: 340px" class="style1"> <select name="gred1" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> ii. Layout, Font and Color (Readable, Consistent, Attractive) </td> <td style="width: 340px" class="style1"> <select name="gred2" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> iii. Content Structure</td> <td style="width: 340px" class="style1"> <select name="gred4" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select></td> </tr> <tr> <td style="width: 447px; height: 28px;"> iv. Slide Content</td> <td style="width: 340px; height: 28px;" class="style1"> <select name="gred3" onchange="add()" style="width: 45px"> <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> <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> </select></tr> <tr> <td style="width: 447px"> B) PRESENTATION</td> <td style="width: 340px"></td> </tr> <tr> <td style="width: 447px"> i. Explaining and Not Reading The Slides </td> <td style="width: 340px" class="style1"> <select name="gred5" onchange="add()" style="width: 45px; height: 22px;"> <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> <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> </select> </tr> <tr> <td style="width: 447px"> ii. Voice, Eye Contact and Gestures</td> <td style="width: 340px" class="style1"> <select name="gred6" onchange="add()" style="width: 45px; height: 22px;"> <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> <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> </select> </tr> <tr> <td style="width: 447px"> iii. Capture Audience Interest</td> <td style="width: 340px" class="style1"> <select name="gred7" onchange="add()" style="width: 45px"> <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> <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> </select> </tr> <tr> <td style="width: 447px"> iv. Proper Introduction and Closing</td> <td style="width: 340px" class="style1"> <select name="gred8" onchange="add()" style="width: 45px"> <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> <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> </select></td> </tr> <tr> <td style="width: 447px"> C) LANGUAGE</td> <td style="width: 340px" class="style1"> </tr> <tr> <td style="width: 447px"> i. Fluency </td> <td style="width: 340px" class="style1"> <select name="gred9" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select></td> </tr> <tr> <td style="width: 447px"> ii. Correctness</td> <td style="width: 340px" class="style1"> <select name="gred10" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> iii. English Vocabulary</td> <td style="width: 340px" class="style1"> <select name="gred11" onchange="add()" style="width: 45px"> <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> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> D) QUESTION AND ANSWER HANDLING</td> <td style="width: 340px" class="style1"> </tr> <tr> <td style="width: 447px"> i. Confidence</td> <td style="width: 340px" class="style1"> <select name="gred12" onchange="add()" style="width: 45px"> <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> <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> </select> </tr> <tr> <td style="width: 447px"> ii. Logic Responds</td> <td style="width: 340px" class="style1"> <select name="gred13" onchange="add()" style="width: 45px"> <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> <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> </select> </tr> <tr> <td style="width: 447px; height: 27px;"><center><b>Total</b></center></td> <td style="width: 340px; height: 27px;"><center> <input name="totalmark" type="text" style="width: 52px" value="0" > <?php echo $_POST["$total"];></center></td> </table> <table> <tr> <td class="style1" style="width: 802px"><br><input type="button" name="total" value="CALCULATE" onclick= "add()"> <input type="RESET" value="RESET"></td> </tr> </form> </table> </body> </html> I'm working on creating a custom calculator to determine the amount of money / credits users may earn from referrals. I've tested onChange, and it will work only when I have changed to a new field or clicked off that field. How do I make this calculate live? So if the current value is 5 and I change it to 6, it will automatically recalculate the new value. You can see what I'm working on he http://sheetmusichaven.com/admin/mys...calculator.php Note: The one I'm testing is the 1st Level field. For now i'm just having it display the date. |