JavaScript - Auto Calculate Conversion And Display To Beside Textbox
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. Similar TutorialsHello, I am not well-versed with javascript. Actually i have some calculations has to be displayed in total (textbox) as soon as i enter the values in other text box. I have done that. But if multiple rows added (its dynamically added ) that code doesn't work for 2nd row or 3rd row... I don't know how to do it. Here is my form where i am entering data and displaying result Code: <input type="text" class="span2" name="item[]" id="category" value="<?php echo $row1['item'];?>" /> <input type="text" class="span1" name="uom[]" id="category" value="<?php echo $row1['uom'];?>" /> <input type="text" name="description[]" id="category" value="<?php echo $row1['description'];?>" /> <input type="text" class="span1" name="quantity[]" id="qty" onkeyup="getValues(1)" /> <input type="text" class="span1" name="price[]" id="price" value="<?php echo $row1['selling_price'];?>" onkeyup="getValues(2)" /> <input type="text" class="span1" name="discount[]" id="discount" value="<?php echo $row1['discount'];?>" onkeyup="getValues(3)" /> <select name="tax[]" class="span1" id="tax" onkeyup="getValues(4)"> <option value="<?php echo $row1['tax'];?>"><?php echo $row1['tax'];?></option> <?php $l1 = mysql_query("select * from taxes") or die (mysql_error()); while($l2 = mysql_fetch_array($l1)) { ?> <option value="<?php echo $l2['rate']; ?>"> <?php echo $l2['name'];?> - <?php echo $l2['rate'];?>% </option> <?php } ?> </select> <input type="text" class="span1" name="freight[]" id="freight" onkeyup="getValues(5)" placeholder="Freight" /> <!--<input type="text" class="span1" name="freight_tax[]" id="frtax" placeholder="Frt Tax" /> --> <input type="text" class="span2" name="total[]" id="total" /> And java script Code: <script language="javascript"> function getValues(val){ var numVal1=parseInt(document.getElementById("qty").value); var numVal2=parseInt(document.getElementById("price").value); var numVal3=parseInt(document.getElementById("discount").value); var numVal4=parseFloat(document.getElementById("tax").value); var numVal5=parseFloat(document.getElementById("freight").value); var sub_total = (numVal1 * numVal2) - numVal3; var subt_tax = sub_total * (numVal4/100); var total = parseFloat(sub_total + subt_tax); var totalValue = parseFloat(total + numVal5); document.getElementById("total").value = totalValue; } </script> 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> hi, 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... 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 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 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> Hello guys (and girls) I am messing with this whole day, 'cos I wanted to try and figure this out by myself instead of going on forums. I failed, as you may see. So, to cut it short: I needed to calculate my prices on-the-fly and display it in textbox with javascript. Well I did succeed with values of radio button an checbox, but as i know very little javascript, I don't know how to expand the code i got from he http://javascript.internet.com/forms...e-refresh.html So what I would LOVE to know, is how can I make this happen: I have a textbox: Code: <input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);"> and when a user inputs a number in it, javascript multiplies it with some other number, say 10 (its a price*quantity thing) and adds it to the total price along with data from checkboxes and radio buttons. And so, this is my javascript. It is basically identical to one on the link, but you can view it better this way I think. Code: // Calculate the total for items in the form which are selected. function calculateTotal(inputItem) { with (inputItem.form) { // Process each of the different input types in the form. if (inputItem.type == "radio") { // Process radio buttons. // Subtract the previously selected radio button value from the total. calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value); // Save the current radio selection value. previouslySelectedRadioButton.value = eval(inputItem.value); // Add the current radio button selection value to the total. calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); } else { // Process check boxes. if (inputItem.checked == false) { // Item was uncheck. Subtract item value from total. calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value); } else { // Item was checked. Add the item value to the total. calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value); } } elseif // Total value should never be less than 0. if (calculatedTotal.value < 0) { InitForm(); } // Return total value. return(formatCurrency(calculatedTotal.value)); } } // Format a value as currency. function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + num + '.' + cents + ' kn'); } // This function initialzes all the form elements to default values. function InitForm() { // Reset values on form. document.selectionForm.total.value='$0'; document.selectionForm.calculatedTotal.value=0; document.selectionForm.previouslySelectedRadioButton.value=0; // Set all checkboxes and radio buttons on form to unchecked. for (i=0; i < document.selectionForm.elements.length; i++) { if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') { document.selectionForm.elements[i].checked = false; } } } I don't want to overspam my post with more code, so I hope this is all you need, at least for now. THANK YOU very much in advance. I have this code which converts Fahrenheit to Celsius. Now, I have to have a counter that displays the amount of times I have made a conversion. I have no clue how to do this. This is the initial code:
Code: <html> <head> <script type="text/javascript"> /* Converts given centigrade in one text box to farenheit in another */ function convert1 () { document.getElementById("output").value = document.getElementById("input").value*1.8+32; } </script> </head> <body> <p>Then enter the input and view the output</p> <input type="text" size="15" id="input"> <input type="button" value=" ==> " onclick="convert1()"> <input type="text" size="15" id="output"> </body> </html> I don't know how to approach this so I tried different things.... Code: tml> <head> <script type="text/javascript"> /* Converts given centigrade in one text box to farenheit in another */ function convert1 () { document.getElementById("output").value = document.getElementById("input").value*1.8+32; } function counter() { if (function convert1().onclick==true) {count++;} } </script> </head> <body> <p>Then enter the input and view the output</p> <input type="text" size="15" id="input"> <input type="button" value=" ==> " onclick="convert1()"> <input type="text" size="15" id="output"> </body> </html> but then I did some research and it said I couldn't do that.... so I tried this: Code: <html> <head> <script type="text/javascript"> /* Converts given centigrade in one text box to farenheit in another */ var count=0; function documentClick() { document.getElementById('clicked').value = ++clickCount } document.onclick = documentClick; function convert1 () { document.getElementById("output").value = document.getElementById("input").value*1.8+32; } </script> </head> <body> <p>Then enter the input and view the output</p> <input type="text" size="15" id="input"> <input type="button" value=" ==> " onclick="convert1()"> <input type="text" size="15" id="output"> </body> </html> I think this last code is correct, the problem I have now is that I don't know how to call it to just display as text under the buttons and conversions. I'm looking for some way to display it like ("you have made"+ count+ "conversions");. No boxes or buttons, just text and I don't know how to call for this after the </script>, inside the body. I am new at all this and would appreciate any help. Thanks. It should look like this. 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 am trying to create an auto suggest drop down. I have some ASP and Javascript code that I am using as an Autosuggest. Trouble is, the result displays on the main page, not under the text box like a drop down menu. I need help in getting the results to display correctly underneath the textbox. I have trawlled the internet and have loads and loads of code samples but I cant see the wood for the trees and I am really struggling with editing this code so that it displays correctly. clienthint.asp Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <html> <head> <script src="clienthint.js"></script> </head> <body> <% 'this displays the value of the textbox after the form is submitted If trim(Request("txt1")) <> "" Then Response.Write "You entered:" Response.Write "<b>" & Request("txt1") & "</b><br /><br />" End If %> <form name="form1" action="clienthint.asp" method="post"> Enter Word: <input type="text" name="txt1" id="txt1" onKeyUp="showHint(this.value,'txt1','form1',true)"> <input type="submit" name="submit" value="submit"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> clienthint.js Code: var xmlHttp function showHint(str, box, thisForm, autoSubmit) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&b="+box; url=url+"&f="+thisForm; url=url+"&a="+autoSubmit; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } //this function allows for Clickable suggestions function setTextBox(thisText,thisBox,thisForm,autoSubmit){ document.getElementById(thisBox).value = thisText //this autoSubmits the form after a suggestion is clicked - it is not working :( //if(autoSubmit=='true'){ // alert(thisForm); // document.getElementById(thisForm).submit(); //} } gethint.asp Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <% response.expires=-1 Dim rsWords Dim rsWords_numRows Dim q Dim b Dim hint q=ucase(request.querystring("q")) b=(request.querystring("b")) f=(request.querystring("f")) a=(request.querystring("a")) hint="" Set rsWords = Server.CreateObject("ADODB.Recordset") rsWords.ActiveConnection = "Provider=SQLOLEDB; Data Source=JAGUAR\SQLEXPRESS; Initial Catalog=67625252; User ID=SFSDFSDF; Password=KJHSDHFJHDF" rsWords.Source = "SELECT * FROM Rmatable WHERE (RMA_ID LIKE'" + q + "%') ORDER BY RMA_ID" rsWords.CursorType = 2 rsWords.CursorLocation = 2 rsWords.LockType = 3 rsWords.Open() rsWords_numRows = 0 If Not rsWords.EOF Then Do While Not rsWords.EOF If trim(hint) = "" Then hint = "<a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>" Else hint = hint & " , <a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>" End If rsWords.MoveNext() Loop End If if trim(hint)="" then response.write("no suggestion") else response.write(hint) end if rsWords.Close() Set rsWords = Nothing %> Can anyone tell me what I am doing wrong? I am a javascript student and I am building a calculator. The display on the calculator will not show the numbers when the button is selected. I am inserting my javaScript and html: <html> <head> <title> Calculator</title> </head> <script type = "text/javascript" src="calculator.js"></script> <body> <center>Calculator<br> To use this calculator, CLICK a number, then an ACTION, then another number, then the EQUALS button. <br> Press "C" when ready to start over. <br> The "N" button makes your previous number a negative.<br></center> <form name="calculator"> <table border = "1" align ="center"> <tr> <td ><input type = "text" size = 26 name = "display" id = ""/></td> </tr> <tr ><br /> <!-- first row of calculator --> <td> <input type = "button" value = " 7 " id = "" onclick="newstring('7')"> <input type = "button" value = " 8 " id = "" onclick="newstring('8')"/> <input type = "button" value = " 9 " id = "" onclick="newstring('9')"> <input type = "button" value = " / " id = "" onclick="newstring('/')"> </td> </tr> <tr ><br /> <!-- second row of calculator --> <td> <input type = "button" value = " 4 " id = "" onclick="newstring('4')"> <input type = "button" value = " 5 " id = "" onclick="newstring('5')"> <input type = "button" value = " 6 " id = "" onclick="newstring('6')"> <input type = "button" value = " * " id = "" onclick="newstring('*')"> </td> </tr> <tr ><br /> <!-- third row of calculator --> <td> <input type = "button" value = " 1 " id = "" onclick="newstring('1')"> <input type = "button" value = " 2 " id = "" onclick="newstring('2')"> <input type = "button" value = " 3 " id = "" onclick="newstring('3')"> <input type = "button" value = " - " id = "" onclick="newstring('-')"> </td> </tr> <tr ><br /> <!-- forth row of calculator --> <td> <input type = "button" value = " 0 " id = "" onclick="newstring('0')"> <input type = "button" value = " N " id = "" onclick="newstring('N')"> <input type = "button" value = " = " id = "" onclick="newstring('=')"> <input type = "button" value = " + " id = "" onclick="newstring('+')"> </td> </tr> <tr ><br /> <!-- fifth row of calculator --> <td> <input type = "button" value = "   " id = ""> <input type = "button" value = "   " id = ""> <input type = "button" value = "   " id = ""> <input type = "button" value = " C " id = "" onclick="clear()"> </td> </tr> </table> </body> </form> </html> ############################################### javascript: memory = "0"; current = "0"; operation =0; function newstring(digit) { if (eval(current) == 0) { current = digit; } else { current = current + digit; } document.calculator.display.value=current; } Hi Folks, Have a C# application. On one of the .aspx page, I have a simple textbox: <asp:TableCell ColumnSpan="4"> <asp:TextBox ID="txtBox1" runat="server" Width="210px" MaxLength="100" TextMode="MultiLine" /></asp:TableCell> The Textbox display about half of its 100 character capacity to the user. I need the Tooltip to display the entire contents when hovered. Since the user can enter any length of text and hover the tooltip at any time, I figure Javascript in the codebehind page (.aspx.cs ) would be the solution. I know absolutley nothing about JAVA script ! Can anyone help ? Thank You in advance for your help ! I have a long list consisting of a name and associated number, like this: SITE01 2111 SITE02 4567 SITE03 5555 and so on. I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this. hi this is santosh first off all thanks in advance to all who r reading my question im in prblm in my project in 1 file i have to first display textbox in html statically which will hav + & - button preceding it , & on click of + button one more textbox should appear dynamically & first textbox + button should disapper & it should hav only - button & the textbox which was dynamically generated now on click of first textbox + button should hav + & - button & it should go on. & on click of - button textbox which is in front of it should get deleted. here i tried alot but my code is showing + & - button to every textbox that is dynamically generated which is not the requirement plz help me im in great need. earlier also i hav submitted my queries & got a fully satisfied result bcoz of that now im having great hopes from u & this site plz reply as early as possible waiting for ur reply again thanks in advance Hi friends, i have xnl file like <DATAPACKET > <data1> <R_ID>101</R_ID> <R_PRE>38</R_PRE> <R_PRE2>39</R_PRE2> <R_TEMP>8.35</R_TEMP> <R_TENP2>0.64</R_TENP2> </data1> <data1> <R_ID>102</R_ID> <R_PRE>36</R_PRE> <R_PRE2>37</R_PRE2> <R_TEMP>7.23</R_TEMP> <R_TENP2>1.21</R_TENP2> </data1> <data1> <R_ID>103</R_ID> <R_PRE>34</R_PRE> <R_PRE2>36</R_PRE2> <R_TEMP>7.21</R_TEMP> <R_TENP2>1.95</R_TENP2> </data1> <data1> <R_ID>104</R_ID> <R_PRE>32</R_PRE> <R_PRE2>35</R_PRE2> <R_TEMP>6.25</R_TEMP> <R_TENP2>2.30</R_TENP2> </data1> <data1> <DATAPACKET > then i have textbox...when i type 101 its go and get all data in the row in text area like 101 32 6025 2.30 please give me any idea how to do this i m try this if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "Refrigerater.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("ROWDATA"); //x = xmlDoc.getElementsByTagName("data1"); function displayInfo(selBox) { x = xmlDoc.getElementsByTagName("ROWDATA"); var col = (selBox.options[selBox.selectedIndex].text); document.getElementById("show").innerHTML = " " + col; } Please resolve my problem Thanks Venkat.S Hi.. I have forms and I only need to input is the Demanded Qty, and from Demanded Qty that I input it will compute the demanded qty for each Item Code. Now my problem is I don't know on how can it possible that while i input the quantity it will also autodisplay the demanded qty for each materials. Noted: the Demanded Qty that will auto display is display only on the Demanded Qty you input per Items. For Example: On Item = P28 i input demanded qty, only on the ItemCode will display the output. and when i input on P30 the computation will display on the ItemCode for P30. here is my code: PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <title>Stock Requisition</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css"> <script type="text/javascript"> function compute_quantity(){ var DemandedQty = document.getElementById('DemandedQty').value; var Quantity = document.getElementById('Quantity').value; var SubQty = (DemandedQty * Quantity); } </script> </head> <body> <form name="stock_requisition" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div> <table> <thead> <th>Items</th> <th>Sub Items</th> <th>Item Code</th> <th>Demanded Qty</th> <th>UoM</th> <th>Class</th> <th>Description</th> <th>BIN Location</th> </thead> <?php $DemandedQty = $_POST['DemandedQty']; $sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items"; $res_bom = mysql_query($sql, $con); while($row = mysql_fetch_assoc($res_bom)){ $Items = $row['Items']; $Items_ = substr($Items, 12, 3); echo "<tr> <td style='border: none;font-weight: bold;'> <input type='name' value='$Items_' name='Items_[]' id='Items' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border:none;'> </td> <td style='border:none;'> </td> <td style='border: none;'><center><input type='text' name='DemandedQty[]' id='DemandedQty' value='' size='12' onkeypress = compute_quantity()></center></td> </tr>"; $sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error()); $res_sub = mysql_query($sql, $con); while($row_sub = mysql_fetch_assoc($res_sub)){ $Items1 = $row_sub['Items']; $SubItems = $row_sub['SubItems']; $ItemCode = $row_sub['ItemCode']; $UoM = $row_sub['UoM']; $Class = $row_sub['Class']; $Description = $row_sub['Description']; $BINLocation = $row_sub['BINLocation']; $Quantity = $row_sub['Quantity']; echo "<input type='hidden' name='Quantity' id='Quantity' value='$Quantity'>"; echo "<tr> <td style='border: none;'> <input type='hidden' value='$Items1' id='Items1' name='Items1[]'></td> <td style='border: none;'> <input type='text' name='SubItems[]' value='$SubItems' id='SubItems' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='ItemCode[]' value='$ItemCode' id='ItemCode' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'><center><input type='text' name='SubQty[]' id='SubQty' value='' size='12' style></center></td> <td style='border: none;' size='3'> <input type='text' name='UoM[]' value='$UoM' id='UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td> <td style='border: none;'> <input type='text' name='Class[]' value='$Class' id='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td> <td style='border: none;'> <input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> </tr>"; } } ?> </table> </div> </form> </body> </html> Thank you so much Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <head> <script type="text/javascript"> function ini() { // Retrieve the code var code =document.getElementById ("code_read_box1").value; var code =document.getElementById ("code_read_box2").value; var code =document.getElementById ("code_read_box3").value; var code =document.getElementById ("code_read_box4").value; var code =document.getElementById ("code_read_box5").value; var code =document.getElementById ("code_read_box6").value; // Return false to prevent the form to submit return false; } </script> </head> <body onLoad="document.barcode.code_read_box1.focus()"> <form name=barcode onsubmit = "return ini()"> <input type="text" id="code_read_box1" value="" /><br/> <input type="text" id="code_read_box2" value="" /><br/> <input type="text" id="code_read_box3" value="" /><br/> <input type="text" id="code_read_box4" value="" /><br/> <input type="text" id="code_read_box5" value="" /><br/> <input type="text" id="code_read_box6" value="" /><br/> </form> </body> </html> |