|
JavaScript - Javascript Calcuate Volume & Total Dynamic Fields
Hi,
jI have a javascript script that adds/deletes input in a form. I'd like to calculate the volume for each ligne : l*h*d Then a total of all the volume fileds The data will be inserted in a php table. Thanks for your help (I hope you can understand my english) I have trouble with php but even more with javascript versions. PHP Code: -- Structure of mysql table named 'tbox' -- CREATE TABLE IF NOT EXISTS 'tbox' ( 'tboxid' int(11) NOT NULL AUTO_INCREMENT, 'tboxidtproid' int(11) NOT NULL, 'tboxdate' date NOT NULL, 'tboxL' int(11) NOT NULL, 'tboxD' int(11) NOT NULL, 'tboxH' int(11) NOT NULL, 'tboxnet' float NOT NULL, 'tboxgros' float NOT NULL, PRIMARY KEY ('tboxid') ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=55 ; The html page wiith js : PHP Code: <html> <head> <script type="text/JavaScript"> // add a box <!-- function create_champ(i){ var l = document.getElementById('l_1').value; var d = document.getElementById('d_1').value; var h = document.getElementById('h_1').value; var v = document.getElementById('v_1').value = (l * d * h) ; var i2 = i + 1; document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'">L <input type="text" size="9" maxlength="9" name="l[]" id="l_'+i+'" \/> D <input type="text" size="9" maxlength="9" name="d[]" id="d_'+i+'" \/> H <input type="text" size="9" maxlength="9" name="h[]" id="h_'+i+'" \/> Volume : <input type="text" size="9" maxlength="50" name="v[]" id="v_'+i+'" value = "" " disabled="true" \/> <input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>'; document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><input type="button" value="Add a box" onclick="create_champ('+i2+')" \/><\/span>'; } function delete_champ(i){ document.getElementById("ligne_"+i).innerHTML=""; } </script> </head> <body> <form id="1" name="addalbum" method="post" action=""> <td width="250" valign="top"><fieldset> <legend>Boxes Dimensions(mm)</legend> <table width="95%" border="0" cellspacing="0" cellpadding="3"> <tr> <span id="ligne_1"> L <input type="text" name="l[]" id="l_1" size="9" maxlength="9" value="" /> D <input type="text" name="d[]" id="d_1" size="9" maxlength="9" value="" /> H <input type="text" name="h[]" id="h_1" size="9" maxlength="9" value="" /> Volume : <input type="text" name="v[]" id="v_1" size="9" maxlength="9" value="" disabled="true" /> <input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" /> <br /> </span> <span id="champs_2"> <input type="button" value="Add a box" onclick="create_champ(2)" \/></span> </table> </fieldset></td> <label> <input type="submit" name="button" id="button" value="Envoyer"> </label> </form> <?php /* insert fields in table tbox */ ?> </body> </html> Similar TutorialsFolks, I am trying to calculate the total of fields on a web form. I have multiple rows of 10 fields with a total for each. Each row comes from a different record in a database. I am only showing 2 fields of the 10 for simplicity. The name and id of each field looks like "Q300_1" onchange="update(Q300)" "Q300_2" onchange="update(Q300)" "Q300_t" "Q301_1" onchange="update(Q301)" "Q301_2" onchange="update(Q301)" "Q301_t" My current attempt at the script looks like: [CODE] <script type="text/javascript"> function update(item) { var itemt=item + "_t"; var item1=item + "_1"; var item2=item + "_2"; document.myform[itemt].value = (document.myform[item1].value -0) + (document.myform[item2].value -0); } </script> [CODE] It does not work and I get Error: Q301 is not defined in the Firefox error console. I have everything working up to this point but when I try and put the math equation into my script section, I get multiple error and cannot figure out how to get the function to return the actual total rental cost. If you could please look at what I have, your opinions would be greatly appreciated. Thank you. Below is the code with the math function at the end of the script section in the heading which I seem to be receiving error on. Any help is greatly appreciated. Thanks. Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Brooks Rogalski
December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<script type = "text/javascript">
/* <![CDATA[ */
//image slideshow function
var interval = 4000; // delay between rotating images
var random_display = 1; // 0 = no, 1 = yes
var pause = false;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("fishing.jpg");
image_list[image_index++] = new imageItem("biking.jpg");
image_list[image_index++] = new imageItem("climbing.jpg");
image_list[image_index++] = new imageItem("kayaking.jpg");
image_list[image_index++] = new imageItem("scuba.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (pause == true) return;
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//check valid pickup date
function checkValidPDate(which) {
which = which.replace(/[-:,\.]/g,"/");
which = which.replace(/[^0-9\/]/,"");
var dt = which.split("/");
var yr = dt[2];
if (!yr) {yr = 9999}
if (yr.length == 2) {yr = parseInt(yr) + 2000}
if ((yr < 2010) || ( yr > 2020)) {
alert ("Invalid Year or Date Format!");
document.getElementById('dateIn').value = ""; // clear the field
setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it
return false;
}
var mm = dt[0]-1;
var mmx = dt[0];
var dd = dt[1];
var nd = new Date();
nd.setFullYear(yr,mm,dd); // YYYY,MM(0-11),DD
var ndmm = nd.getMonth();
if (ndmm != mm) {
alert (mmx + "/" + dd + "/" + yr + " is NOT a Valid Date!");
document.getElementById("dateIn").value = ""; // clear the field
setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it
return false;
}
else {
alert (mmx + "/" + dd + "/" + yr + " is a Valid Date!"); // for testing
}
var reserveDate = new Date(yr,mm,dd);
var mydate = new Date();
mydate.setDate(mydate.getDate()+2); // Two CLEAR days ahead - NB mydate is HRS:MNS:SECS so same date is a problem
if (reserveDate < mydate) {
window.alert("Reservations need to be at least two clear days in advance.");
document.getElementById("dateIn").value = ""; // clear the field
setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it
}
}
//check valid return date
function checkValidRDate(which) {
which = which.replace(/[-:,\.]/g,"/");
which = which.replace(/[^0-9\/]/,"");
var dt = which.split("/");
var yr = dt[2];
if (!yr) {yr = 9999}
if (yr.length == 2) {yr = parseInt(yr) + 2000}
if ((yr < 2010) || ( yr > 2020)) {
alert ("Invalid Year or Date Format!");
document.getElementById('dateOut').value = ""; // clear the field
setTimeout("document.getElementById('dateOut').focus()", 25); // and refocus on it
return false;
}
var mm = dt[0]-1;
var mmx = dt[0];
var dd = dt[1];
var nd = new Date();
nd.setFullYear(yr,mm,dd); // YYYY,MM(0-11),DD
var ndmm = nd.getMonth();
if (ndmm != mm) {
alert (mmx + "/" + dd + "/" + yr + " is NOT a Valid Date!");
document.getElementById("dateOut").value = ""; // clear the field
setTimeout("document.getElementById('dateOut').focus()", 25); // and refocus on it
return false;
}
else {
alert (mmx + "/" + dd + "/" + yr + " is a Valid Date!"); // for testing
}
if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){
window.alert("Please choose later date");
valid=false;
return false;
}
}
//validate form functions
function validateForm() {
var valid = true;
//validate equipment
if (document.forms[0].equipment.selectedIndex == 0) {
window.alert("Please select your equipment type.");
document.forms[0].equipment.focus();
return false;
}
//validate pick-up time hours
if (document.forms[0].pickupHours.selectedIndex == 0) {
window.alert("Please select the number of hours for pick-up time.");
document.forms[0].pickupHours.focus();
return false;
}
//validate pick-up time minutes
if (document.forms[0].pickupMinutes.selectedIndex == 0) {
window.alert("Please select the number of minutes for pick-up time.");
document.forms[0].pickupMinutes.focus();
return false;
}
//validate return time hours
if (document.forms[0].returnHours.selectedIndex == 0) {
window.alert("Please select the number of hours for return time.");
document.forms[0].returnHours.focus();
return false;
}
//validate return time minutes
if (document.forms[0].returnMinutes.selectedIndex == 0) {
window.alert("Please select the number of minutes for return time.");
document.forms[0].returnMinutes.focus();
return false;
}
//validate first name
if (document.forms[0].firstName.value=="") {
window.alert("Please enter your first name.");
document.forms[0].firstName.focus();
valid = false;
return valid;
}
//validate last name
if (document.forms[0].lastName.value=="") {
window.alert("Please enter your last name.");
document.forms[0].lastName.focus();
valid = false;
return valid;
}
//validate street address
if (document.forms[0].street.value=="") {
window.alert("Please enter your street address.");
document.forms[0].street.focus();
valid = false;
return valid;
}
//validate city
if (document.forms[0].city.value=="") {
window.alert("Please enter your city.");
document.forms[0].city.focus();
valid = false;
return valid;
}
//validate zip code
if (document.forms[0].zip.value==""){
window.alert("Please enter your zip code.");
document.forms[0].zip.focus();
valid=false;
return valid;
}
var re5digit=/^\d{5}$/
if (document.forms[0].zip.value.search(re5digit)==-1){
window.alert("Please enter a 5 digit number")
valid=false;
return valid;
}
//validate date of birth
if (document.forms[0].date.value == "'' || '(mm/dd/yyyy)'" ){
window.alert("Please enter your date of birth.");
document.forms[0].birthDate.focus();
valid=false;
return valid;
}
var reDateFormat = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
if(document.forms[0].date.value.search(reDateFormat)==-1){
window.alert("Please enter a standard format. [mm/dd/yyyy]")
valid=false;
return valid;
}
//check if over 18
var age;
var input = document.forms[0].birthDate.value;
var pyear = parseInt(input.substring(6,10));
var pmonth = parseInt(input.substring(0,2)) - 1;
var pday = parseInt(input.substring(3,5));
if ( month < pmonth ){
age = year - pyear - 1;
}
else if ( month > pmonth ){
age = year - pyear;
}
else if ( month == pmonth ){
if ( day < pday ){
age = year - pyear - 1;
}
else if ( day > pday ){
age = year - pyear;
}
else if ( day == pday ){
age = year - pyear;
}
}
if(age < 18){
window.alert('Attention: Under 18!');
valid=false;
return valid;
}
//calculate total cost and diplay in window.confirm() dialog box
var equip = document.forms[0].equipment.value
var pDate = document.forms[0].pickupDate.value
var pHours = document.forms[0].pickupHours.value
var pMinutes = document.forms[0].pickupMinutes.value
var rDate = document.forms[0].returnDate.value
var rHours = document.forms[0].returnHours.value
var rMinutes = document.forms[0].returnMinutes.value
var pTime = pHours + pMinutes;
var rTime = rHours + rMinutes;
var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip);
var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline");
if (OK) {return true}
else {return false}
}
/* ]]> */
</script>
</head>
<body onload = "rotateImage('rImage')">
<h1> ABC Outdoor Sports Equipment </h1>
<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;">
<br/>
<br/>
<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" id = "dateIn" name = "pickupDate" onchange = checkValidPDate(this.value)>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" id = "dateOut" name = "returnDate" onchange = checkValidRDate(this.value)>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation"/>
<input type = "button" name = "cookies" value = "Store User Information"/>
</td>
</tr>
</table>
</form>
</body>
</html>
I am using a script that duplicates a fieldset and an onBlur event that updates a sub total when you enter a value into 3 fields in the set but I am having one glitch that I can not figure out and would appreciate any insight you can provide. Here is the trouble: The duplication of the fieldset works great. I have another script which is creating a sum ("sum") of the fields named "unitPrice" in the original fieldset. When I duplicate the fieldset that has the new "unitPrice" fields they do not get calculated into that sum. I am sure the "unitPrice" fields are being renamed in the new fieldset but what name would I use and how do I write it into the calculation so that the sub total ("sum") is updated with all of the "unitPrice" fields? Thanks for your help. Code: <!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
// Suffix + Counter
var suffix = ':';
var counter = 1;
// Clone nearest parent fieldset
function cloneMe(a) {
// Increment counter
counter++;
// Find nearest parent fieldset
var original = a.parentNode;
while (original.nodeName.toLowerCase() != 'fieldset') {
original = original.parentNode;
}
var duplicate = original.cloneNode(true);
// Label - For and ID
var newLabel = duplicate.getElementsByTagName('label');
for (var i = 0; i < newLabel.length; i++) {
var labelFor = newLabel[i].htmlFor
if (labelFor) {
oldFor = labelFor.indexOf(suffix) == -1 ? labelFor : labelFor.substring(0, labelFor.indexOf(suffix));
newLabel[i].htmlFor = oldFor + suffix + counter;
}
var labelId = newLabel[i].id
if (labelId) {
oldId = labelId.indexOf(suffix) == -1 ? labelId : labelId.substring(0, labelId.indexOf(suffix));
newLabel[i].id = oldId + suffix + counter;
}
}
// Input - Name + ID
var newInput = duplicate.getElementsByTagName('input');
for (var i = 0; i < newInput.length; i++) {
var inputName = newInput[i].name
if (inputName) {
oldName = inputName.indexOf(suffix) == -1 ? inputName : inputName.substring(0, inputName.indexOf(suffix));
newInput[i].name = oldName + suffix + counter;
}
var inputId = newInput[i].id
if (inputId) {
oldId = inputId.indexOf(suffix) == -1 ? inputId : inputId.substring(0, inputId.indexOf(suffix));
newInput[i].id = oldId + suffix + counter;
}
}
// Select - Name + ID
var newSelect = duplicate.getElementsByTagName('select');
for (var i = 0; i < newSelect.length; i++) {
var selectName = newSelect[i].name
if (selectName) {
oldName = selectName.indexOf(suffix) == -1 ? selectName : selectName.substring(0, selectName.indexOf(suffix));
newSelect[i].name = oldName + suffix + counter;
}
var selectId = newSelect[i].id
if (selectId) {
oldId = selectId.indexOf(suffix) == -1 ? selectId : selectId.substring(0, selectId.indexOf(suffix));
newSelect[i].id = oldId + suffix + counter;
}
}
// Textarea - Name + ID
var newTextarea = duplicate.getElementsByTagName('textarea');
for (var i = 0; i < newTextarea.length; i++) {
var textareaName = newTextarea[i].name
if (textareaName) {
oldName = textareaName.indexOf(suffix) == -1 ? textareaName : textareaName.substring(0, textareaName.indexOf(suffix));
newTextarea[i].name = oldName + suffix + counter;
}
var textareaId = newTextarea[i].id
if (textareaId) {
oldId = textareaId.indexOf(suffix) == -1 ? textareaId : textareaId.substring(0, textareaId.indexOf(suffix));
newTextarea[i].id = oldId + suffix + counter;
}
}
duplicate.className = 'duplicate';
insertAfter(duplicate, original);
}
// Delete nearest parent fieldset
function deleteMe(a) {
var duplicate = a.parentNode;
while (duplicate.nodeName.toLowerCase() != 'fieldset') {
duplicate = duplicate.parentNode;
}
duplicate.parentNode.removeChild(duplicate);
}
</script>
<script>
function myFunction(){
var the_fields = document.getElementsByName("unitPrice");
var the_sum = 0;
for (var i=0; i<the_fields.length; i++){
if (the_fields[i].value != "" && !isNaN(the_fields[i].value)) {
the_sum += Number(the_fields[i].value);
}
}
document.repairform.sum.value = (the_sum.toFixed(2));
}
</script>
<SCRIPT LANGUAGE="JavaScript">
function CalculateTotal() {
firstnumber = document.repairform.sum.value/100;
secondnumber = document.repairform.tax.value;
total = (firstnumber * secondnumber -0) + (document.repairform.sum.value -0);
document.repairform.grandTotal.value = total.toFixed(2)
;
}
</SCRIPT>
<script>
function checkDecimal(obj, objStr){
var objNumber;
if(isNaN(objStr) && objStr!=''){
alert('Value entered is not numeric');
objNumber = '0.00';
}
else if(objStr==''){
objNumber = '0.00';
}
else if(objStr.indexOf('.')!=-1){
if(((objStr.length) - (objStr.indexOf('.')))>3){
objStr = objStr.substr(0,((objStr.indexOf('.'))+3));
}
if(objStr.indexOf('.')==0){
objStr = '0' + objStr;
}
var sLen = objStr.length;
var TChar = objStr.substr(sLen-3,3);
if(TChar.indexOf('.')==0){
objNumber = objStr;
}
else if(TChar.indexOf('.')==1){
objNumber = objStr + '0';
}
else if(TChar.indexOf('.')==2){
objNumber = objStr + '00';
}
}
else{
objNumber = objStr + '.00';
}
obj.value = objNumber;
}
</script>
</head>
<body>
<form id="item_details" name="repairform" method="post" action="#" onSubmit="return false;">
<h2>Contact Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="name">
Name:
</label>
</td>
<td>
<input type="text" id="name" name="name" />
</td>
<td>
<label for="form-phone">
Phone:
</label>
</td>
<td>
<input id="form-phone" type="tel" required> </td>
</tr>
<tr>
<td>
<label for="form-date">
Date:
</label>
</td>
<td>
<input id="form-date" type="date"required>
</td>
<td>
<label for="form-datewanted">
Date Wanted
</label>
</td>
<td>
<input id="form-datewanted" type="date" required>
</td>
</tr>
<tr>
<td>
<label for="form-address">
Address
</label>
</td>
<td>
<input id="form-address" type="text">
</td>
</tr>
</table>
</fieldset>
<h2>Vehicle Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="form-ymc">
Year-Model-Color</label>
</td>
<td>
<input id="form-ymc" type="text" required>
</td>
<td>
<label for="form-make">MAKE</label>
</td>
<td>
<input id="form-make" type="text">
</td>
</tr>
<tr>
<td><label for="form-bodytype">BODY TYPE</label>
</td>
<td>
<input id="form-bodytype" type="text">
</td>
<td>
<label for="form-unitno">UNIT NO.</label>
</td>
<td>
<input id="form-unitno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-serialno">SERIAL NO.</label>
</td>
<td>
<input id="form-serialno" type="text">
</td>
<td>
<label for="form-motorno">MOTOR NO.</label>
</td>
<td>
<input id="form-motorno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-mileage">MILEAGE</label>
</td>
<td>
<input id="form-mileage" type="text">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
<h2>Repair Estimate</h2>
<fieldset>
<span class="tab">
<a href="#" onClick="cloneMe(this); return false;" class="cloneMe" title="Add">+</a>
<a href="#" onClick="deleteMe(this); return false;" class="deleteMe" title="Delete">x</a>
</span>
<table cellspacing="10">
<tr>
<td>
<label for="repair_replace">Repair/Replace</label>
</td>
<td class="mainText">
<input class="radio" name="repair_replace" type="radio" value="Repair" />Repair<br>
<input class="radio" name="repair_replace" type="radio" value="Replace" />Replace
</td>
<td>
<label for="form-description">Description:
</label>
</td>
<td >
<textarea id="form-description" name="form-description" cols="5" rows="5" ></textarea>
</td>
</tr>
<tr>
<td>
<label>PARTS AND MATERIALS </label>
</td>
<td><input name="unitPrice" value="" id="parts" onBlur="myFunction(); checkDecimal(this,this.value)" onFocus="this.focus();" class="dollar" />
</td>
<td>
<label>LABOR </label>
</td>
<td ><input name="unitPrice" value="" id="labor" type="text" onblur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
</tr>
<tr>
<td>
<label>REFINISHING </label>
</td>
<td><input name="unitPrice" id="refinishing" type="text" onBlur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
<td>
</td>
<td >
</td>
</tr>
</table>
</fieldset>
<h2>Price Estimate</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td><label>SUB TOTAL </label>
</td>
<td><input type="text" name="sum" class="dollar" readonly/>
</td>
<td>
<label>Tax %</label>
</td>
<td>
<input class="tax" type="text" name="tax" onBlur="CalculateTotal()" />
</td>
</tr>
<tr>
<td>
<label>GRAND TOTAL </label>
</td>
<td>
<input type="text" name="grandTotal" class="dollar" readonly/>
</td>
<td>
</td>
<td >
<p>
<input type="submit" value="Send Estimate" onClick="myFunction()">
</p>
</td>
</tr>
</table>
</fieldset>
<p>
<input type="submit" value="Submit" class="button" /><input type="reset" value="Reset" class="button" />
</p>
</form>
</body>
</html>
hi guys kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT language="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 = rowCount + 1; 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> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> hi i am newbie to js please help me like a newbie thanks. i want to make a form. the form will have three text fields and with two buttons. what i want with this form is when the user enters the first three fields and if he wants to add more then he will click on add more button and on the same page three more fields will appear below the first three fields. the user will then enter these three fields then if he wants to add more then he will click on add more button. so three more fields will appear below the first six fields. user will enter these fields. he will be allowed to enter upto eight or less than eight times. once he finishes with this then he will click the second button to insert this data into db. i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row. here is js code Code: var counter = 0;
//Start a counter. Yes, at 0
function add_phone() {
counter++;
// I find it easier to start the incrementing of the counter here.
var newFields = document.getElementById('addQualification').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
}
var insertHere = document.getElementById('addQualification');
// Inside the getElementById brackets is the name of the div class you will use.
insertHere.parentNode.insertBefore(newFields,insertHere);
}
here is my form Code: <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
Degree:
<input type="text" name="degree_0" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_0" value="" /><br>
Institute:
<input type="text" name="institute_0" value="" /><br>
</div>
<div id="addQualification" style="display: none;">
Degree:
<input type="text" name="degree_" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_" value="" /><br>
Institute:
<input type="text" name="institute_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>
here is my php Code: <?php
if(isset($_POST['submit']))
//This checks to make sure submit was clicked
{
echo "You clicked submit!<br>";
echo "Here is your data<br>";
echo "<br>";
if ($_POST['cgpa_0'])
//This checks that the proper field has data
{
$continue = FALSE;
$i = 0;
while ($continue == FALSE)
{
if (isset($_POST['degree_'.$i]))
//This looks for an entry after 0 and increments
{
echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
//Echoing the data
$degree1 = $_POST['degree_'.$i];
$cgpa1 = $_POST['cgpa_'.$i];
$institute1 = $_POST['institute_'.$i];
$db = mysql_connect("localhost");
mysql_select_db("test", $db);
$query = "INSERT INTO cv
(
degree1,
cgpa1,
institute1
)
VALUES
(
'$degree1',
'$cgpa1',
'$institute1'
)";
$result = mysql_query($query);
//The four lines above is the example on how the data would be put into a MySQL database. It's not used here
}
else
{
$continue = TRUE;
}
$i++;
}
}
}
?>
I have a form that only shows the submit (update) buttons if the value select field beside it is changed. But what is someone has JS disabled, how can I enable them? Code: <select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;"> Am integrating a Barclays epdq shopping cart into an existing website, part of the regulations with this system is that you can only submit from one 'allowed url'. To enable access from multiple url's I need to create a 'jump page'. This needs to be a simple page that takes any variables posted to it and re-posts them (onload) onto the epdq shopping cart. The problem is I am unable to populate the form dynamically and submit onload. I have tested and it all works fine if hardcoded. Is it possible to submit a dynamically generated form using javascript? PHP Code: foreach ($_POST as $name => $value){ $newVars .= '<INPUT value="' . $value . '" name="' . $name .'" type="hidden" />'; } Code: <html> <head></head> <body onLoad="document.epdqformer.submit();"> <FORM name="epdqformer" id="epdqformer" action="https://secure2.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e" method="POST"> PHP Code: I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
if (self.init)
init();
}
var counter = 0;
var counter1 = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
document.getElementById('moreFields1').onclick = moreFields1;
moreFields();
moreFields1();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readcomp').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writecomp');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function moreFields1() {
counter1++;
var newFields = document.getElementById('readsubgr').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter1;
}
var insertHere = document.getElementById('writesubgr');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<div id="readcomp" style="display: none">
Comp name<input type=text name="comp" value="" size="2"/>
Concentration<input type=text name="comp_qty" value="" size="2"/>
<input type="button" value="Remove comp"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
<span id="writesubgr"></span>
<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>
<div id="readsubgr" style="display: none">
Subgroup Name<input type=text name="subgroup" value="" size="2"/>
Quantity <input type=text name="subgroup_qty" value="" size="2"/>
<input type="button" value="Remove subgroup"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form action="cgi_bin\show_input.pl" method="post">
<span id="writecomp"></span>
<input type="button" id="moreFields" value="add comp" /><br/><br/>
<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated. thanks Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT 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 Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. Hi, I'm trying to create a Invoice form with javascript. Basically, my invoice form should have the field item, cost, quantity and product total. It shd have a function to allow the user to add rows if they want more than one item. In the end, there should be a sub total. I am able to use javascript to calc the total of each product, but not all products(Grand total). I am also unable to add rows. Can anyone help me? Thanks! This is what I have so far: <? mysql_connect("", "", ""); mysql_select_db(invoice); session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript"> function calcProdTotal(){ var total; var amount = parseInt(document.invoiceForm.qty.value); total = (parseFloat(document.invoiceForm.price.value) * amount); document.invoiceForm.Prodtotal.value = round_decimals(total, 2); } function round_decimals(original_number, decimals) { var result1 = original_number * Math.pow(10, decimals) var result2 = Math.round(result1) var result3 = result2 / Math.pow(10, decimals) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // Convert the number to a string var value_string = rounded_value.toString() // Locate the decimal point var decimal_location = value_string.indexOf(".") // Is there a decimal point? if (decimal_location == -1) { // If no, then all decimal places will be padded with 0s decimal_part_length = 0 // If decimal_places is greater than zero, tack on a decimal point value_string += decimal_places > 0 ? "." : "" } else { // If yes, then only the extra decimal places will be padded with 0s decimal_part_length = value_string.length - decimal_location - 1 } // Calculate the number of decimal places that need to be padded with 0s var pad_total = decimal_places - decimal_part_length if (pad_total > 0) { // Pad the string with 0s for (var counter = 1; counter <= pad_total; counter++) value_string += "0" } return value_string } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Invoice</title> <style type="text/css" media="screen"> @import url("css/layout.css"); .style1 { font-size: 14px; font-weight: bold; } .style2 {font-size: 14px} </style> </head> <body> <? include("header.php"); ?> <div class="find_more"> <p>Create new Invoice</p> </div> <div class="container_row"> <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px"> <? $sqlstmt = "SELECT * From Client"; $result = mysql_query($sqlstmt); $options= ""; while ($row=mysql_fetch_array($result)) { $ClientID = $row["Client_ID"]; $orgName = $row["Org_Name"]; $options.="<option value = \"$ClientID\">".$orgName."</option>"; } $sqlstmt2 = "SELECT * From Item"; $result2 = mysql_query($sqlstmt2); $options2= ""; while ($row=mysql_fetch_array($result2)) { $ItemID = $row["Item_ID"]; $itemName = $row["Item_Name"]; $options2.="<option value = \"$ItemID\">".$itemName."</option>"; } ?> <form name="invoiceForm" method="post" action=""> <p><strong>TO:</strong> <select name ="Client"> </br></br></br> <option value = ""> --Select a Client-- <?= $options ?></option> </select></p> <table> <table border='0' cellpadding='2' cellspacing='2' width='600' > <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Attention</th> <th>From</th> <th colspan="2">Payment terms</th> </tr> <tr align='centre' valign='centre'> <td><input type="text" name = "contact"/></td> <td><input type="text" name = "sender"/></td> <td colspan="2"><input type="text" name = "paymentTerms"/></td> </tr> <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Item Name</th> <th>Cost ($)</th> <th>Quantity</th> <th>Total</th> </tr> <tr align='centre' valign='centre'> <td><select name ="ItemName"> <option value = ""> --Select a Item-- <?= $options2 ?></option> </select> </td> <td><input name="price" type="text" id="price"></td> <td><input type="text" size="5" name="qty" onChange="calcProdTotal()"></td> <td><input type="text" name="Prodtotal" onBlur="parseelement(this)"></td> </tr> <tr> <th colspan="3" align='right'>GST:</th> <td><input type="text" value="7" name = "gst"/>%</td> </tr> <tr> <th colspan="3" align='right'>Sub Total:</th> <td><input type="text" name = "Subtotal"/></td> </tr> <tr> <th colspan="3" align='right'>Grand Total:</th> <td><input type="text" name = "Grandtotal"/></td> </tr> </table> </form> <br /> <? include("footer.php"); ?> </body> </html> I need to implement a function in JavaScript to calculate the total of the purchase which is equal to price of each tool * quantity ordered* sales tax=.08. I also need to use confirm() to display the total cost of the purchase so the user can see it. If my user confirms the order by clicking ok then but clicking cancel will terminate the order. <!DOCTYPE html> <html> <head> <title>Form</title> <meta charset="UTF-8" /> <body> <h1 style="text-align:center"> Hardware Store</h1> <form action="http://www.yahoo.com/formtest.php"> <p> <label> Buyer's Name: <input type="text" name="name" size="30"/> </label> <label> Street Address: <input type="text" name="street" size="30"/> </label> <label> City, State, Zip: <input type="text" name="city" Size="30"/> </label> </p> <table> <tr> <th> Tool Name </th> <th> Price </th> <th> Quantiy </th> </tr> <tr> <td> Hammer </td> <td> $12.00</td> <td> <input type= "text" name="Hammer" size="2" /> </td> </tr> <tr> <td> Shovel </td> <td> $18.00 </td> <td> <input type="text" name="Shovel" size="2" /> </td> </tr> <tr> <td> Trimmer </td> <td> $22.00 </td> <td> <input type="text" name="Trimmer" size="2" /> </td> </tr> </table> <h2> Payment Method </h2> <label> Visa <input type="radio" name="payment" id="payment_visa" value="visa" checked="checked"/> </label> <br /> <label> Mastercard <input type="radio" name="payment" id="payment_mastercard" value="mastercard"/> </label> <br /> <label> American Express <input type="radio" name="payment" id="payment_american_express" value="american express"/> </label> <br /> <input type="submit" value="Submit" /> </form> </body> </html> Hi, my javascript calculates a total figure. It rounds it up though and I want it to give me a decimal (x2) total. Please help. Here is my code so far: Code: <script type="text/javascript">
function calculateText()
{
var op1=document.getElementById('Age02');
var op2=document.getElementById('Girl35');
var op3=document.getElementById('Boy35');
var op4=document.getElementById('Girl610');
var op5=document.getElementById('Boy610');
var op6=document.getElementById('Age11');
var op7=document.getElementById('Guest');
var op8=document.getElementById('VIP');
var op9=document.getElementById('School');
var op10=document.getElementById('3DFilm');
var op11=document.getElementById('BFast');
var op12=document.getElementById('PNGift');
var op13=document.getElementById('PStand');
var op14=document.getElementById('PLrg');
var op15=document.getElementById('PReP');
var op16=document.getElementById('KyMg');
var op17=document.getElementById('SnwGlb');
var op18=document.getElementById('PBbl');
var op19=document.getElementById('USB');
var op20=document.getElementById('SantaL');
var op21=document.getElementById('SantaK');
var op22=document.getElementById('FreeP');
var op23=document.getElementById('PUpgrd');
var op24=document.getElementById('StaffP');
var op25=document.getElementById('CompEntry');
var op26=document.getElementById('241');
var op27=document.getElementById('50Percent');
var op28=document.getElementById('Voucher');
var result=document.getElementById('Total');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
if(op3.value=="" || op3.value!=parseFloat(op3.value)) op3.value=0;
if(op4.value=="" || op4.value!=parseFloat(op4.value)) op4.value=0;
if(op5.value=="" || op5.value!=parseFloat(op5.value)) op5.value=0;
if(op6.value=="" || op6.value!=parseFloat(op6.value)) op6.value=0;
if(op7.value=="" || op7.value!=parseFloat(op7.value)) op7.value=0;
if(op8.value=="" || op8.value!=parseFloat(op8.value)) op8.value=0;
if(op9.value=="" || op9.value!=parseFloat(op9.value)) op9.value=0;
if(op10.value=="" || op10.value!=parseFloat(op10.value)) op10.value=0;
if(op11.value=="" || op11.value!=parseFloat(op11.value)) op11.value=0;
if(op12.value=="" || op12.value!=parseFloat(op12.value)) op12.value=0;
if(op13.value=="" || op13.value!=parseFloat(op13.value)) op13.value=0;
if(op14.value=="" || op14.value!=parseFloat(op14.value)) op14.value=0;
if(op15.value=="" || op15.value!=parseFloat(op15.value)) op15.value=0;
if(op16.value=="" || op16.value!=parseFloat(op16.value)) op16.value=0;
if(op17.value=="" || op17.value!=parseFloat(op17.value)) op17.value=0;
if(op18.value=="" || op18.value!=parseFloat(op18.value)) op18.value=0;
if(op19.value=="" || op19.value!=parseFloat(op19.value)) op19.value=0;
if(op20.value=="" || op20.value!=parseFloat(op20.value)) op20.value=0;
if(op21.value=="" || op21.value!=parseFloat(op21.value)) op21.value=0;
if(op22.value=="" || op22.value!=parseFloat(op22.value)) op22.value=0;
if(op23.value=="" || op23.value!=parseFloat(op23.value)) op23.value=0;
if(op24.value=="" || op24.value!=parseFloat(op24.value)) op24.value=0;
if(op25.value=="" || op25.value!=parseFloat(op25.value)) op25.value=0;
if(op26.value=="" || op26.value!=parseFloat(op26.value)) op26.value=0;
if(op27.value=="" || op27.value!=parseFloat(op27.value)) op27.value=0;
if(op28.value=="" || op28.value!=parseFloat(op28.value)) op28.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value*5)+parseInt(op2.value*5)+parseInt(op3.value*5)+parseInt(op4.value*5)+parseInt(op5.value*5)+parseInt(op6.value*5)+parseInt(op7.value*0)+parseInt(op8.value*8.50)+parseInt(op9.value*3.75)+parseInt(op10.value*0)+parseInt(op11.value*10)+parseInt(op12.value*5)+parseInt(op13.value*3)+parseInt(op14.value*4)+parseInt(op15.value*2)+parseInt(op16.value*4)+parseInt(op17.value*5)+parseInt(op18.value*3)+parseInt(op19.value*5)+parseInt(op20.value*4)+parseInt(op21.value*3)+parseInt(op22.value*0)+parseInt(op23.value*1)+parseInt(op24.value*0)+parseInt(op25.value*0)+parseInt(op26.value*4)+parseInt(op27.value*2)-parseInt(op28.value);
}
</script>
|
|||||||