Learn VBA & Macros in 1 Week!

JavaScript - How Does Javascript Calculate Values And In Wich Order?

Full Excel VBA Course - Beginner to Expert

How Does Javascript Calculate Values And In Wich Order?	View Content

Full Excel VBA Course - Beginner to Expert

Javascript To Calculate 2 Form Values With Price And Sums With Total

Similar Tutorials

View Content

Need help please asap. It might be simple but i couldn't work out the script. help!
----------------
Formfield.anzahl1 = number entered by customer
Formfield.Price1 = Ergebnisfeld1
e.g.
Anzahl1= 1
Price = 270
*if Anzahl1 = 2 then Price = 270*2

I need to do this for two form option. 2nd field would be as follows

Formfield.Anzahl2= number entered by customer
Formfield.Price2 = Ergebnisfeld2

Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2
-------------------
How can I convert these above to javascript?

Calculate Values

Similar Tutorials

View Content

Auto Calculate Values

Similar Tutorials

View Content

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')" >&nbsp;
<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;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</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;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</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;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</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;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Cash Dis :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</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;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Total :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</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>

Calculate Checkbox And Drop Down Values

Similar Tutorials

View Content

I have the following code working with the checkbox options but once I added a drop down menu with values, it doesn't calculate it. I've done some different things to try to add the drop down to the function but nothing would work that I've tried so far.

I have it setup so when a box is unchecked, that option is taken off the price, the drop down should do the same to switch between the options price.

Thanks for the help!

Code:

<script language="javascript">
totalOptions = 0;

function calculateTotalOptions(thisCheckbox){
	if (thisCheckbox.checked)
	{
		totalOptions += parseFloat(thisCheckbox.value);
	} else {
		totalOptions -= parseFloat(thisCheckbox.value);
	}
	document.getElementById("totalOptions").value = "$" + totalOptions + ".00";
}
</script>
<form name="Options" >
<table width="765" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="8" align="center" bgcolor="#FFFFFF">Please select which model you would like to price and then add your optional equipment.</td>
    <td width="4" align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="4" align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td width="4" align="center" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" align="center" bgcolor="#FFFFFF"><strong>Available on these models</strong></td>
    <td width="85" align="center" bgcolor="#FFFFFF">Most Popular Options</td>
    <td width="97" align="center" bgcolor="#FFFFFF">Option Code</td>
    <td width="192" align="center" bgcolor="#FFFFFF"><strong>Optional Equipment</strong></td>
    <td width="61" align="center" bgcolor="#FFFFFF"><strong>Price</strong></td>
    <td width="149" align="center" bgcolor="#FFFFFF"><strong>Add Option</strong></td>
  </tr>
  <tr>
    <td width="58" align="center"><p><strong>SR 125<br />
    </strong></p></td>
    <td width="58" align="center"><p><strong>SR 225<br />
    </strong></p></td>
    <td width="58" align="center"><p><strong>SR 325<br />
    </strong></p></td>
    <td colspan="5" align="right"><strong>Select Base Model: 
      </strong>      <select name="model" id="model">
        <option value="0.00" selected onclick="calculateTotalOptions(this);">--------</option>
        <option value="-6995.00" onclick="calculateTotalOptions(this);">SR 125 Standard</option>
        <option value="-7495.00" onclick="calculateTotalOptions(this);">SR 125 H.D.</option>
        <option value="7995.00" onclick="calculateTotalOptions(this);">SR 125 S.D.</option>
        <option value="8495.00" onclick="calculateTotalOptions(this);">SR 225 Standard</option>
        <option value="8995.00" onclick="calculateTotalOptions(this);">SR 225 H.D.</option>
        <option value="9595.00" onclick="calculateTotalOptions(this);">SR 225 S.D.</option>
        <option value="9995.00" onclick="calculateTotalOptions(this);">SR 325 Standard</option>
        <option value="10495.00" onclick="calculateTotalOptions(this);">SR 325 H.D.</option>
        <option value="10995.00" onclick="calculateTotalOptions(this);">SR 325 S.D.</option>
      </select></td>
    </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">SR-ES</td>
    <td bgcolor="#FFFFFF">•Electric start </td>
    <td bgcolor="#FFFFFF">$345.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="345.00" onclick="calculateTotalOptions(this);"> </td>
  </tr>
  <tr>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center">&nbsp;</td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td>SR-OCP</td>
    <td>•Operator convience package; includes tach, hour, lube meter, hydraulic pressure gauge and bottle holder</td>
    <td>$125.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="125.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-EZM</td>
    </table></td>
    <td bgcolor="#FFFFFF">•EZ maintance hydraulic package; includes temperature and fill sight guage and quickdrain ball valve</td>
    <td bgcolor="#FFFFFF">$100.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="100.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center">&nbsp;</td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-6W</td>
    </table></td>
    <td>•Six way wedge with on board storage</td>
    <td>$495.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-JLL</td>
    </table></td>
    <td bgcolor="#FFFFFF">•Jointed log lift</td>
    <td bgcolor="#FFFFFF">$495.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-SEGTR</td>
    </table></td>
    <td>•Segmented tire for spotting includes spotting hitch</td>
    <td>$350.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="350.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-MGST</td>
    </table></td>
    <td bgcolor="#FFFFFF">•Motor guard with saddle for segmented tire</td>
    <td bgcolor="#FFFFFF">$95.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="95.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center">&nbsp;</td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-MG</td>
    </table></td>
    <td>•Motor guard w/o saddle</td>
    <td>$75.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="75.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-SPRTR</td>
    </table></td>
    <td bgcolor="#FFFFFF">•Spare tire and holder</td>
    <td bgcolor="#FFFFFF">$250.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="250.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td>&nbsp;</td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-HOC</td>
    </table></td>
    <td>•Hydraulic oil cooler</td>
    <td>$795.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="795.00" onclick="calculateTotalOptions(this);">
    </td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-GRLP</td>
    </table></td>
    <td bgcolor="#FFFFFF">•Grip Rightâ„¢ log points (each additional point)</td>
    <td bgcolor="#FFFFFF">$20.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="20.00" onclick="calculateTotalOptions(this);">
    </td>
  </tr>
  <tr>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td>&nbsp;</td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-HDF</td>
    </table></td>
    <td>•Heavy duty fenders</td>
    <td>$145.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="145.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center" bgcolor="#FFFFFF"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
    <td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
  <td width="127">SR-LP</td>
    </table></td>
    <td bgcolor="#FFFFFF">•Light package</td>
    <td bgcolor="#FFFFFF">$195.00</td>
    <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="195.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
    <td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
    <td>&nbsp;</td>
    <td><table cellspacing="0" cellpadding="0">
  <td width="127">SR-38LO</td>
    </table></td>
    <td>•38&quot; log opening *includes 2 1/2&quot; cylinder rod </td>
    <td>$995.00</td>
    <td align="center"><input type="checkbox" name="t1" id="t1" value="995.00" onclick="calculateTotalOptions(this);"></td>
  </tr>
  <tr>
    <td colspan="8" align="center" bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><strong>TOTAL:</strong></td>
    <td><input type="text" id="totalOptions" readonly>
      
  </td>
  </tr>
</table>
</form>

Help With Resetting Values When Hitting Calculate Button

Similar Tutorials

View Content

I am having trouble with figuring a way to set my loop up to reset values of the different coin values. Example, when I put in 78, and click calculate, it tells you how much of each coin would be given back. My problem is that I set it up and run it, but when I put different values in back to back to calculate, some of the fields don't reset. I just need some ideas or logic behind what I need to do.

Code:

var change_out = function(){

	
	do {
	var money = document.getElementById("cents").value;
	
	if (money >= 25)
	{
	var quarters = parseInt(money / 25);
	var foo = parseInt(money - (quarters * 25));
	document.getElementById("quarters").value = quarters;
	
		
	
			if (foo >= 10)
			{
			var left = parseInt(foo / 10);
			var wow = parseInt(foo - (left * 10));
			document.getElementById("dimes").value = left;
			if(wow==0)return;
		
			
			
					if (wow >= 5)
					{
					var dumb = parseInt(wow / 5);
					var pop = parseInt(wow - (dumb * 5));
					document.getElementById("nickels").value = dumb;
					document.getElementById("pennies").value = pop;
			
					}else{document.getElementById("pennies").value = wow;}
					
			
			}else if (foo >= 5){
				var dumb = parseInt(foo / 5);
				var pop = parseInt(foo - (dumb * 5));
				document.getElementById("nickels").value = dumb;
				document.getElementById("pennies").value = pop;
				
				}else{document.getElementById("pennies").value = foo;}
			
			
	
	}else if (money >= 10){
		var left = parseInt(money / 10);
		var wow = parseInt(money - (left * 10));
		document.getElementById("dimes").value = left;
		
				if (wow > 5){
				var dumb = parseInt(wow / 5);
				var pop = parseInt(wow - (dumb * 5));
				document.getElementById("nickels").value = dumb;
				document.getElementById("pennies").value = pop;
				document.getElementById("quarters").value = "";
		
				}else{document.getElementById("pennies").value = wow;}
				
	}else if (money >= 5){
		var dumb = parseInt(money / 5);
		var pop = parseInt(money - (dumb * 5));
		document.getElementById("nickels").value = dumb;
		document.getElementById("pennies").value = pop;
		document.getElementById("quarters").value = "";
		document.getElementById("dimes").value = "";
		
	}else{
	document.getElementById("pennies").value = money;
	document.getElementById("quarters").value = "";
	document.getElementById("dimes").value = "";
	document.getElementById("nickels").value = "";
	
	
	
	
	}
	
	
	
	}while(isNaN(money))}

Javascript Calculate Totals And Tax

Similar Tutorials

View Content

I am working on a form that has 15 rows for order entry. These rows are called:

qty | part | desc | cost | amount

I have the following ASP code that generates the rows:

Code:

	<% For i = 1 To 15 %>
		 <TR align=center><td><input type="text" NAME="qty<%Response.Write i%>" onChange='DoMath()'></td>
		 <TD><INPUT TYPE="text" NAME="part<% Response.Write i %>"></TD>
		 <TD><INPUT TYPE="text" NAME="desc<%Response.Write i %>"></TD>
		 <TD><INPUT TYPE="text" NAME="cost<%Response.Write i%>" onChange="DoMath()"></TD>
		 <TD><INPUT TYPE="text" NAME="amount<%Response.Write i%>" readonly></TD></TR>
	<% Next  %>

		<script type='text/javascript'>

		function DoMath(){

		var Units = document.PlaceOrder.qty1.value;
		var Rate = document.PlaceOrder.cost1.value;
		var Total = Units * Rate;
		document.PlaceOrder.amount1.value = Total.toFixed(2);
		document.PlaceOrder.grandtotal.value = Total.toFixed(2);
		}

		</script>

This works fine for the first row, but I need it to scale for the rest of the rows, and also allow for future addition/expansion. Unfortunately, I am Javascript-tarded and can't figure it out, despite numerous examples online...

I also need to find a way to recalculate the "grandtotal" box on the form based on whether or not the checkbox called "taxChecked" is checked. If the user checks it, I need it to recalculate the "grandtotal" field with a tax rate, and if they un-check it, it should recalcuate "grandtotal" WITHOUT the tax rate.

Any suggestions or pointers are greatly appreciated!

How Do You Calculate Percentages In Javascript?

Similar Tutorials

View Content

Can anyone help me with the following Javascript. I am going crazy trying to figure this out because it should be easy. Basically I want to calculate the percentage of a number, but I'm getting a really weird result. In the following code f is equal to 3 and x.length is equal to 8. The part that isn't working is emphasised in bold. Basically 3/8 * 100 should result in 37.5 but the result I am getting with the following code is 7934570.3125. How do you calculate this percentage in Javascript?

Code:

function displaymember()
{
var m = 1;
var f = 1;
for(i=0;i<x.length;i++)
 {
 
	sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);

if (sex=="Male")
  {
  m++;
  }
else
  {
  f++;
  }

percent=f/x.length * 100

document.getElementById("fixed").innerHTML=percent;
   }
}

Javascript Calculate Form Not Working

Similar Tutorials

View Content

It's been a long time since I've messed around with Javascript. I had some resources and books that sort of showed what I was wanting to do. Essentially what I am trying to create is a calculator which allows the user to check the components of their computer and when they hit "calculate" it will output the price of the system for them. I found some simplified examples of what I am trying to do online, but I cannot for the life of me figure out why when I hit "calculate" nothing happens The code is below (I pasted the wholes of both codes because I'm not sure where exactly the problems are). Any help is definitely appreciated!

html code:
Code:

<html>


<head>
<script language="JavaScript1.1" src="calculate.js" type="text/javascript"></script>
</head>




<body onLoad="load ()">


<center>

  <form name="calc" method="POST">

 <table width="100%" border="0" cellpadding="3">
  
  <tr>
   <td colspan="11"><center><h1>Computer Pricing Calculator</h1></center></td>
  </tr>

  <tr>
   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">TYPE</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="5" align="center"><font color="white" size="+2">PROCESSOR</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">HARD DRIVE</font></th>
  </tr>


<!--Row 1 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Single Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="single" size="10"></td>
   <td width="5"></td>


   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 2 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Dual Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="double" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

    <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 3 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">Desktop/Tower</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="pc" size="10"></td>
   <td width="5"></td>


   <td bgcolor="#eeeeee" width="20%">Core i-3 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="triple" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Hyper-threaded Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ht" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 4 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>


   <td bgcolor="#eeeeee" width="20%">Quad Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="quad" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Enter the size (gb)</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="size" size="1"></td>
   <td width="5"></td>
  </tr>


<!--Row 5 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">Laptop</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="laptop" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Core i-5 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="five" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Enter the speed (ghz)</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="speed" size="1"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

  </tr>


<!--Row 6 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Six Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="six" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 7 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Core i-7 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="seven" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>
  

  

<tr>
   <td height="25">
   </td>
</tr>

<!--Row 1 -->
  <tr>
   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">RAM</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">VIDEO CARD</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OPTICAL DRIVE</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OFFICE</font></th>
  </tr>

<!--Row 2 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">512 MB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram512mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">No Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="novid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/ROM Only</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrom" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Open Office</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nooffice" size="10"></td>
  </tr>

<!--Row 3 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">768 MB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram768mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">64 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid64mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW Only</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrw" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 97</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office97" size="10"></td>
  </tr>

<!--Row 4 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">1.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">128 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid128mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW - DVD/ROM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrom" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 2003</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office03" size="10"></td>
  </tr>

<!--Row 5 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">1.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">256 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid256mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW - DVD/RW</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrw" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 2007</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office07" size="10"></td>
  </tr>

<!--Row 6 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">2.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">512 MB DDR Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid512mb" size="10"></td>
   <td width="5"></td>

   <td width="20%"></td>
   <td align="center" width="4%"></td>
   <td width="5"></td>

   <td width="20%"></td>
   <td align="center" width="4%"></td>
  </tr>

<!--Row 7 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">2.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">768 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid768mb" size="10"></td>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">CONNECTIVITY</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OS</font></th>
  </tr>

<!--Row 8 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">3.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">1.0 GB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid1000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">NIC</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nic" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows XP</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="xp" size="10"></td>
  </tr>

<!--Row 9 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">3.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">DDR2/DDR3 Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr23vid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Modem</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="modem" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows Vista</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vista" size="10"></td>
  </tr>

<!--Row 10 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">4.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram4000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">DDR5 Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr5vid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Wireless</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="wireless" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows 7</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="windows7os" size="10"></td>
  </tr>


<tr>
   <td height="40">
   </td>
</tr>


<tr>
   <td colspan="3"></td>
   <td colspan="2" align="center"><input name="Submit" type="submit" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:15pt; font-weight:900; letter-spacing=2px" onClick="count ()" value="CALCULATE PRICE!"></td>
   <td width="5"></td>
   <td colspan="2" align="center"><input type="reset" value="RESET VALUES!" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:16pt; font-weight:900; letter-spacing=2px"></td>
   <td colspan="3"></td>
</tr>


<tr>
   <td height="40">
   </td>
</tr>

  <tr>
   <td bgcolor="#ffffff" colspan="11" align="center"><font size="18">PRICE = $</font><input name="pay" type="text" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:25pt; letter-spacing=1px" size="10"></td>
  </tr>



 </table>

</form>

</center>

</body>

</html>

javascript code (calculate.js)
Code:

function load()
{
window.status = "Pricing Guide"
}

function count()
{

//Type variables
var pcprice = 0;
var laptopprice = 20;
var typeprice = 0;

//Processor variables
var singleprice = 1.67;
var doubleprice = 2.05;
var tripleprice = 1.31;
var quadprice = 2.30;
var fiveprice = 1.97;
var sixprice = 2.0;
var sevenprice = 3.09;
var htprice = 0;
var processorprice = 0;

//RAM variables
var ram512mbprice = 15;
var ram756mbprice = 22;
var ram1000mbprice = 30;
var ram1500mbprice = 45;
var ram2000mbprice = 60;
var ram2500mbprice = 75;
var ram3000mbprice = 80;
var ram3500mbprice = 95;
var ram4000mbprice = 110;
var ramprice = 0;

//Video Card variables
var novidprice = 0;
var vid64mbprice = 10;
var vid128mbprice = 15;
var vid256mbprice = 20;
var vid512mbprice = 28;
var vid768mbprice = 33;
var vid1000mbprice = 40;
var ddr23vidprice = 1.5;
var ddr5vidprice = 2;
var vidprice = 0;
var videoprice = 0;

//Optical Drives variables
var cdromprice = 2;
var cdrwprice = 5;
var cdrwdvdromprice = 20;
var cdrwdvdrwprice = 35;
var driveprice = 0;

//Connectivity variables
var nicprice = 0;
var modemprice = 5;
var wireless price = 20;
var connectprice = 0;

//Office variables
var noofficeprice = 0;
var office97price = 0;
var office03price = 30;
var office07price = 50;
var officeprice = 0;

//Operating System variables
var xpprice = 0;
var vistaprice = 0;
var windows7osprice = 110;
var osprice = 0;

//Hard drive - Input Box
var hdsize = document.getElementById('size');
var hdprice = 0;

//Processor Speed - Input Box
var pcspeed = document.getElementById('speed');
var processorprice = 0;

//COMPUTER TYPE - Check Boxes
 if (calc.pc.checked){
    var typeprice = document.calc.pc.value = pcprice;
 } 
 if (calc.laptop.checked){
    var typeprice = document.calc.laptop.value = laptopprice;
 } 

//Hard Drive
var hdprice = hdsize * 0.30;

//Processor - Check Boxes
 if (calc.single.checked){
    var processorprice = document.calc.single.value = singleprice * pcspeed;
 } 
 if (calc.double.checked){
    var processorprice = document.calc.double.value = doubleprice * pcspeed;
 } 
 if (calc.triple.checked){
    var processorprice = document.calc.triple.value = tripleprice * pcspeed;
 } 
  if (calc.quad.checked){
    var processorprice = document.calc.quad.value = quadprice * pcspeed;
 } 
  if (calc.five.checked){
    var processorprice = document.calc.five.value = fiveprice * pcspeed;
 } 
  if (calc.six.checked){
    var processorprice = document.calc.six.value = sixprice * pcspeed;
 } 
 if (calc.seven.checked){
    var processorprice = document.calc.seven.value = sevenprice * pcspeed;
 } 
  if (calc.ht.checked){
    var htprice = document.calc.ht.value = 10;
 } 
 
 //RAM - Check Boxes
 if (calc.ram512mb.checked){
    var ramprice = document.calc.ram512mb.value = ram512mbprice;
 } 
 if (calc.ram756mb.checked){
    var ramprice = document.calc.ram756mb.value = ram756mbprice;
 } 
 if (calc.ram1000mb.checked){
    var ramprice = document.calc.ram1000mb.value = ram1000mbprice;
 } 
 if (calc.ram1500mb.checked){
    var ramprice = document.calc.ram1500mb.value = ram1500mbprice;
 } 
 if (calc.ram2000mb.checked){
    var ramprice = document.calc.ram2000mb.value = ram2000mbprice;
 } 
 if (calc.ram2500mb.checked){
    var ramprice = document.calc.ram2500mb.value = ram2500mbprice;
 } 
 if (calc.ram3000mb.checked){
    var ramprice = document.calc.ram3000mb.value = ram3000mbprice;
 } 
 if (calc.ram3500mb.checked){
    var ramprice = document.calc.ram3500mb.value = ram3500mbprice;
 } 
 if (calc.ram4000mb.checked){
    var ramprice = document.calc.ram4000mb.value = ram4000mbprice;
 } 


//VIDEO CARD - Check Boxes
 if (calc.novidprice.checked){
   var vidprice = document.calc.novidprice.value = novidprice;
 } 
 if (calc.vid64mb.checked){
    var vidprice = document.calc.vid64mb.value = vid64mbprice;
 } 
 if (calc.vid128mb.checked){
   var vidprice = document.calc.vid128mb.value = vid128mbprice;
 } 
 if (calc.vid256mb.checked){
   var vidprice = document.calc.vid256mb.value = vid256mbprice;
 } 
 if (calc.vid512mb.checked){
   var vidprice = document.calc.vid512mb.value = vid512mbprice;
 } 
 if (calc.vid768mb.checked){
   var vidprice = document.calc.vid768mb.value = vid768mbprice;
 } 
 if (calc.vid1000mb.checked){
   var vidprice = document.calc.vid1000mb.value = vid1000mbprice;
 } 
   var videoprice = vidprice;

 if (calc.ddr23vid.checked){
   var videoprice = document.calc.ddr23vid.value = vidprice * 1.5;
 } 
 if (calc.ddr5mb.checked){
   var videoprice = document.calc.ddr5mb.value = vidprice * 2;
 } 

//OPTICAL DRIVES - Checkbox
 if (calc.cdrom.checked){
    var driveprice = document.calc.cdrom.value = cdromprice;
 } 
 if (calc.cdrw.checked){
    var driveprice = document.calc.cdrw.value = cdrwprice;
 } 
 if (calc.cdrwdvdrom.checked){
    var driveprice = document.calc.cdrwdvdrom.value = cdrwdvdromprice;
 } 
 if (calc.cdrwdvdrw.checked){
    var driveprice = document.calc.cdrwdvdrw.value = cdrwdvdrwprice;
 } 

//CONNECTIVITY - Checkbox
 if (calc.nic.checked){
    var connectprice = document.calc.nic.value = nicprice;
 } 
 if (calc.modem.checked){
    var connectprice = document.calc.modem.value = modemprice;
 } 
 if (calc.wireless.checked){
    var connectprice = document.calc.wireless.value = wirelessprice;
 } 

// OFFICE - Checkbox
 if (calc.noffice.checked){
    var officeprice = document.calc.nooffice.value = officeprice;
 } 
 if (calc.office97.checked){
    var officeprice = document.calc.office97.value = office97price;
 } 
 if (calc.office03.checked){
   var officeprice = document.calc.office03.value = office03price;
 } 
 if (calc.office07.checked){
    var officeprice = document.calc.office07.value = office07price;
 } 

//OPERATING SYSTEM - Checkbox
 if (calc.xp.checked){
   var osprice = document.calc.xp.value = xpprice;
 } 
 if (calc.vista.checked){
   var osprice = document.calc.vista.value = vistaprice;
 } 
 if (calc.windows7os.checked){
   var osprice = document.calc.windows7os.value = windows7osprice;
 } 

document.calc.pay.value = typeprice + processorprice + htprice + ramprice + videoprice + driveprice + connectprice + officeprice + osprice + hdprice;
}

Help On Javascript Function To Dynamically Calculate

Similar Tutorials

View Content

Hi everyone,

I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values.

I have a PHP-generated form which may have a varying number of fields. I need to:
1. calculate the line total for each row -- unitprice * units = linetotal
2. calculate total of all linetotals.

I have named my fields as follows:

unitprice[1], unitprice[2]... , units[1], units[2], ...

I have the following calculate function:

Code:

function calculateOld() {
	// get both values
	unitprice = document.forms["invoice"].unitprice.value;
	units = document.forms["invoice"].units.value;
	// do some calculation
	lineTotal = formatNumber((unitprice * units), 2);
	// set the value in the right field
	document.forms["invoice"].linetotal.value = lineTotal;
	
	unitprice2 = document.forms["invoice"].unitprice2.value;
	units2 = document.forms["invoice"].units2.value;

	if(unitprice2 != '') {
		// do some calculation
		lineTotal2 = formatNumber((unitprice2 * units2), 2);
		// set the value in the right field
		document.forms["invoice"].linetotal2.value = lineTotal2;
		document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2);
	}
	else {
		document.forms["invoice"].linetotal2.value = '';
		document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2);
	}
}

This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt.

I have been thinking about what this new and dynamic function should look like, but that's the best I could produce...

Code:

function calculate() {
	
	var unitprice[i]	= document.forms["invoice"].unitprice[i].value;
	var units[i]		= document.forms["invoice"].units[i].value;
	var linetotal[i]	= formatNumber((unitprice[i] * units[i]), 2);
	
	return linetotal;
}

Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance!

Javascript To Calculate Possible Routes Between Two Points

Similar Tutorials

View Content

Hi,

I need a help with a project I am working on.
I am not a developer so not so familiar with javascript.
Suppose I have a map with ten junctions and based on that map,
I need to calculate all the possible routes between one junction to another.
How do I represent the map in javascript and how do I code the function to calculate all the possible routes?? :-(
many thanks if someone can help me

Javascript To Calculate Time Visit Between Current And Previous.

Similar Tutorials

View Content

Hi everyone.

New to javascript here....

I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit...

Example.

I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago"

Can any one enlighten me ? Thank you!

How To Calculate The Time Difference In Javascript And Return The Value Back To Jsp P

Similar Tutorials

View Content

Use Javascript To Calculate Total Cost On Booking Form?

Similar Tutorials

View Content

Values Form A Order Form To Display On A Diffirent Page

Similar Tutorials

View Content

I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.

Javascript Put In Order

Similar Tutorials

View Content

I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions?
<HTML>
<HEAD>
<TITLE>Put Bible books in proper order</TITLE>
</head>

<body>
<h1>Hello World!</h1>
<TABLE BORDER=5><TR><TD>
<FORM NAME="BOOKS">
<script language="javascript" type="text/javascript">
alert('This is what an alert message looks like.');
FUNCTION TESTER() {
ALERT('WORKS');
VAR GOOD=0;
VAR BAD=0;
if (BOOKS.FONE="A") {
GOOD++;
}
ELSE {
BAD++;
};
ALERT("YOU HAVE INCORRECT");
}
</script>

<TABLE BORDER=0><TR><TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;">
</TABLE>

<TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30>
<INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP">
<TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;">
</TABLE>

</TABLE>
<INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???">

</FORM>
</TABLE>
</BODY>
</HTML>

Javascript Stacking Order

Similar Tutorials

View Content

Hello,

I have to JS scripts running on a page, one is a fading slide-show acting as a header and the other is a light-box like image gallery. When I view a picture in the "light-box" mode it sits underneath the fading slide-show and I want it to be on top of everything - much like setting the z-index in css. Although I don't think this is the way to solve this.

Anyway, you can check what I'm talking about here.

Javascript Order Forms

Similar Tutorials

View Content

Help Debug Order That Javascript Is Going.

Similar Tutorials

View Content

Code:

 strapplicantid=document.getElementById('applicantid').value;
$.get("spt.asp"+ '?id=' + strapplicantid + '&rnde='+ Math.round(Math.random() * 10000), function(data){
   alert("Data Loaded: " + data);
    
 });
alert("here");

why is the alert("here") happenign before the alert dataloaded.
I want to be albe to load the html into the variable data and then use that variable. How is this possible to do?

Javascript Order Form Help Needed

Similar Tutorials

View Content

Problem solved thanks to Philip M.
____________________________________________________________________________________

Here is the source code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Order Forms</TITLE>

<SCRIPT>

/******************************* Form Calculations ************************************/

function calculate(fld, price) { // fld will equal pw1 or pe1
     var dir = fld.name.charAt(1); // used to determine whether it is the East or West Form
     var num = fld.name.charAt(2); // what Item number is it
     var quant = fld.options[fld.selectedIndex].value; // how many of the items did the User choose
     var subtotal = eval(quant * price);
     // the eval converts a string to an Object property - in this case the value
     // dir = East or West & num = Item number
     // with this information we can post the result to appropriate Form &
     // to the appropriate Field on the Form 
     eval('document.order.t' + dir + num).value = fix(subtotal);
     var total = 0;
     // this loop sums the totals for each of the Items to give us the Grand Total for that Form
     for (i = 1; i < 11; i++) {
          // does that particular Item have a "total" - in other words did the User choose this Item
          var itemTotal = eval('document.order.t' + dir + i).value;
          // total is a running sum of the Form's "subtotals"
          if (parseFloat(itemTotal) > 0) total += parseFloat(itemTotal);
     }
    // prior to sticking in the Grand Total into the Total Field we need to "dollarize" the number
     eval('document.order.total' + dir ).value = fix(total);
}

// a number like 6.6 should ultimately read as $6.60 and not $6.6
// a number like 6.6275 should ultimately read as $6.63
// the fix(total) function takes care of these particular problems
function fix(total) { // ie, total == 6.6275
     var dollars = Math.floor(total); // dollars = 6

     // browsers sometimes have rounding errors - 662.75 - 600 = 62.75
     var cents = (total * 100) - (dollars * 100); 

     cents = Math.round(cents);  // 63

     if (cents < 10) cents = "0" + cents;
     // .998 will become 1.00 so we need to increment the dollar value by one
     if (cents == 100) dollars++;
     // if cents equal 0 then dollars equal total or total + 1 incase of .998
     if (dollars == total || dollars == Math.floor(total) + 1) cents = "00";

     total = dollars + "." + cents; // 6.63
     return total;
}

/******* End of Form Calculations ********/

</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><form action="sendemail.php" method="post" name="order" id="order" onSubmit="return ValidateInput(this)"></td>
    <td><input type="hidden" name="Formulaire de commande site Pain et Passion" value=""></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</tr>
<tr>
    <td>Item 1</td>
    <td>1.99</td>
    <td><SELECT NAME="pw1" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw1" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item2</td>
    <td>2.99</td>
    <td><SELECT NAME="pw2" SIZE="1" ONCHANGE="calculate(this, 2.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw2" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>item3</td>
    <td>3.99</td>
    <td><SELECT NAME="pw3" SIZE="1" ONCHANGE="calculate(this, 3.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw3" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item3</td>
    <td>1.99</td>
    <td><SELECT NAME="pw4" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw4" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item4</td>
    <td>3.99</td>
    <td><SELECT NAME="pw5" SIZE="1" ONCHANGE="calculate(this, 3.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw5" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item5</td>
    <td>2.99</td>
    <td><SELECT NAME="pw6" SIZE="1" ONCHANGE="calculate(this, 2.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw6" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item6 </td>
    <td>4.99</td>
    <td><SELECT NAME="pw7" SIZE="1" ONCHANGE="calculate(this, 4.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw7" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item7</td>
    <td>5.99</td>
    <td><SELECT NAME="pw8" SIZE="1" ONCHANGE="calculate(this, 5.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw8" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item8</td>
    <td>1.99</td>
    <td><SELECT NAME="pw9" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw9" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item9 (not working)</td>
    <td>5.99</td>
    <td><SELECT NAME="pw10" SIZE="1" ONCHANGE="calculate(this, 5.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw10" SIZE="10" VALUE></td>
	<tr>
    
    <td><p align="right">grand total&nbsp;&nbsp;&nbsp;&nbsp; <img src="arrow.png" width="32" height="32" border="0" alt="" align="absmiddle"></p></td>
    <td><input type="text" name="totalw" size="10" style="background: #87cefa;"></td>
	<td align="left"><input type="submit" value="SEND YOUR ORDER" style="background: #87cefa;"></td>
</tr>
</tr>
<tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>e-mail</td>
    <td><input type="text" name="e-mail"></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>Phone</td>
    <td><input type="text" name="phone"></td>
    <td></td>
    <td></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>

Javascript Puzzle -- Put The Numbers In Order To Win.

Similar Tutorials

View Content

I need to make a --very-- simple version of this game: http://javascript.internet.com/games/magic-squares.html. You need to click on the buttons until they're in order, then you win. I'm having trouble with the function that trades the places of the two buttons.

So, can anyone tell me how my "swap" function should be? It needs to test if the value of the button next to the button clicked on is blank, and then if it is, the two values trade places. This way, I will hopefully end up with 9 different functions, depending on which square I'm clicking on, because the "id" of the button stays the same, it just swaps the values. It shouldn't use any arrays or anything.

Thanks, I appreciate the help!

Here's what I have so far:

Code:

<html>

<head>

<title>15 Puzzle</title>

<script type="text/javascript">

function swap(id){

	if(document.getElementById(id+1).value="")
	{
		
   document.getElementById(id+1).value=document.getElementById(id).value;
   document.getElementById(id).value="";

alert('It works!');
	}

}


</script>

</head>

<p><h1 align="center">15 Puzzle</h1><p>

<p align="center"><input type="button" id="scramble" value="Scramble"></p>
<br>


<table border="3" bordercolor="black" width="300" bgcolor="" 

cellpadding="50" align="center">
<tr>
<td ><input type="button" id="1" value="1" onclick=" swap(this.id);"></td>
<td > <input type="button" id="2" value="" onclick="swap(this.id)"></td>
<td> <input type="button" id="3" value="3" onclick="swap(this.id)"> </td>
<td> <input type="button" id="4" value="4" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="5" value="5" onclick="swap(this.id)"> </td>
<td> <input type="button" id="6" value="6" onclick="swap(this.id)"> </td>
<td> <input type="button" id="7" value="7" onclick="swap(this.id)"> </td>
<td> <input type="button" id="8" value="8" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="9" value="9" onclick="swap(this.id)"> </td>
<td> <input type="button" id="10" value="10" onclick="swap(this.id)"> </td>
<td> <input type="button" id="11" value="11" onclick="swap(this.id)"> </td>
<td> <input type="button" id="12" value="12" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="13" value="13" onclick="swap(this.id)"> </td>
<td> <input type="button" id="14" value="14" onclick="swap(this.id)"> </td>
<td> <input type="button" id="15" value="15" onclick="swap(this.id)"> </td>
<td> <input type="button" id="16" value="2" onclick="swap(this.id)">   </td>
</tr>
</table>





</html>