JavaScript - Calculations With Javascript Inside A Html Form

Hello,
I was given an assignment to change an existing form into one that will automatically perform calculations and since I have never done this before I am learning as I go. The form needs to do the following:
gr_percentage = list_percentage + sale_percentage
gr_comm_dollars = gr_percentage * price
list_comm_dollars = list_percentage * price
and so on. I also need to calculate the following
gr_total_dollars = gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars (all of which will be calculated on entries for the sale and list portions).

I though that I had it figured out but upon testing the form it does nothing. Please let me know what I need to change in order for the calculations to work properly. Thank you
Code:

<script type="text/javascript">

	function calculate(Id)
	 {
		 var price = document.getElementById('price').value;
		 var REO_list_percentage = document.getElementById('REO_list.percentage').value;
		 var REO_sale_percentage = document.getElementById('REO_sale_percentage').value;
		 var REO_sale_dollars = document.getElementById('REO_sale_dollars').value
		 var REO_list_dollars = document.getElementById('REO_list_dollars').value
		 var REO_sale_bonus_dollars = document.getElementById('REO_sale_bonus_dollars').value;
		 var REO_list_bonus_dollars = document.getElementById('REO_list_bonus_dollars').value;
		 var REO_sale_fixed_dollars = document.getElementById('REO_sale_fixed_dollars').value;
		 var REO_list_fixed_dollars = document.getElementById('REO_list_fixed_dollars').value;
		 var gr_comm_dollars = document.getElementById('gr_comm_dollars').value;
		 var gr_bonus_dollars = document.getElementById('gr_bonus_dollars').value;
		 var gr_fixed_dollars = document.getElementById('gr_fixed_dollars').value;
		 
		document.getElementById('gr_comm_percentage').value=REO_list_percentage + REO_sale_percentage;
		document.getElementById('gr_comm_dollars').value=gr_comm_percentage/100*price;
		document.getElementById('reo_list_dollars').value=REO_list_percentage/100*price;
		document.getElementById('reo_sale_dollars').value=REO_sale_percentage/100*price;
		document.getElementById('gr_fixed_dollars').value=REO_sale_fixed_dollars + REO_list_fixed_dollars;
		document.getElementById('gr_bonus_dollars').value=REO_sale_bonus_dollars + REO_list_bonus_dollars;
		document.getElementById('gr_total_dollars').value=gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars;
		document.getElementById('REO_sale_total_dollars').value = REO_sale_comm_dollars + REO_sale_fixed_dollars + reo_sale_bonus_dollars;
		document.getElementById('REO_list_total_dollars').value = REO_list_comm_dollars + REO_list_fixed_dollars + reo_list_bonus_dollars;
		
		gr_comm_dollars = isNAN(gr_comm_dollars)?0:parseFloat(gr_comm_dollars,10);
		gr_fixed_dollars = isNAN(gr_fixed_dollars)?0:parseFloat(gr_fixed_dollars,10);
		gr_bonus_dollars = isNAN(gr_bonus_dollars)?0:parseFloat(gr_bonus_dollars,10);
		
		
		
		
}													   
	</script>
</head>
//here is the form
            <tr >
							<td><cfoutput><cfif #form.list_type# IS 1 OR #form.list_type# IS 2><b>*</b></cfif></cfoutput><b>Sold Price</b> </td>
                            <td><input type="text" id="price" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_comm_dollars','REO_sale_dollars','REO_list_dollars')" /></td>
                            </tr>    
                            <tr><td colspan="2"><b>Commission Information</b>
                            </td>
                            </tr>          
                        <!---Form headings--->
                        <tr><td>&nbsp;</td>
                        <td colspan="2" align="center"><b>Main Commission</b></td>
                        	<td align="center"><b>Fixed</b></td>
                            <td align="center"><b>Bonus/<br />Other</b></td>
                            <td align="center"><b>Total</b></td>
                         </tr>
                         <tr>
                         <td>&nbsp;</td>
                         <td><b>%</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         <td><b>$</b></td>
                         </tr>
                         <!---End form headings--->
						
                            <tr><td><b>*</b>Gross Comm</td>
							<td><input type="Text" id="gr_comm_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_comm_dollars')" > </td>
							<td><input type="text" id="gr_comm_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_total_dollars')"> </td>
                            <td><input type="text" id="gr_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_total_dollars')"> </td>
                             <td><input type="text" id="gr_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate('gr_total_dollars')"> </td>
                              <td><input type="text" name="gr_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
						</tr>
						<tr>
							<cfoutput>
							<cfif #form.list_type# IS 2>
							<td><b>*</b>REO List </td><!---Comp. Dollar--->
							<td><input type="Text" id="REO_list_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_list_dollars')"> </td>
							<td><input type="text" id="REO_list_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                            <td><input type="text" id="REO_list_fixed_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                             <td><input type="text" id="REO_list_bonus_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
                             <td><input type="text" id="REO_list_total_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
                            
                            
                           <!---List type 1 begins here---> 
                            
                            
							<cfelseif #form.list_type# IS 1 ><td><b>*</b>Amt Pd to O/B</td>
							<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" > </td>
							<cfelse><td>Amt Pd to O/B</td>
							<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="OB_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
							</cfif>
							</cfoutput>
						</tr>
						<tr>
							<cfoutput>
							<cfif #form.list_type# IS 2>
							<td><b>*</b>REO Sale  </td><!---Comp. Dollar--->
							<td><input type="Text" id="REO_sale_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_sale_dollars')"> </td>
							<td><input type="text" id="REO_sale_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')" > </td>
                            <td><input type="text" id="REO_sale_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
                              <td><input type="text" id="REO_sale_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
                                <td><input type="text" id="REO_sale_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
                            
                            
                            
                            
                            
                            
                            
                            
							<cfelse><td><b>*</b>REO Gross</td>
							<td><input type="Text" name="comp_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
							<td>$<input type="text" name="comp_dollars" size="8"  class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
							</cfif>
							</cfoutput>
						</tr>														
						<tr>

Hi!
Its just a week I started using javascript. I have a form which takes input from user and the javascript is used to update the totals. I have done all the coding but, I could not figure out where did I mistake. The code below is not updating the totals.

Someone please help me!!!

The java script code validate.js

Code:

<script type = "text/javascript">
function CalculateTotal() {
var bolt = document.getElementById('qnty1').value;
var nut = document.getElementById('qnty2').value;
var washer = document.getElementById('qnty3').value;
document.getElementById("tot1").value = (bolt * 2.15).toFixed(2);
document.getElementById("tot2").value = (nut * 0.45).toFixed(2);
document.getElementById("tot3").value = (washer * 0.30).toFixed(2);
document.getElementById("totqnty").value = ((bolt) + (nut) + (washer)).toFixed(2);
document.getElementById("totamount").value = ((bolt * 2.15) + (nut * 0.45) + (washer * 0.30)).toFixed(2);
}

</script>

The html page with form
Code:

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="task2.css" />
<script type="text/javascript" src="calculate.js"> 
</script>
 <title>Nuts 'R' Us - Order</title>
  </head>
<table class="table">
    
	<tr><td><form id="myform">
  <table class="table">
<tr><td colspan="2"><table class="table3">
<tr><th>Item</th>
<th>Product Code</th>
<th>Diameter</th>
<th>Length</th>
<th>Colour</th>
<th>Unit</th> 
<th>Quantity</th>
<th>Price</th></tr>
<tr><td>Bolt</td><td>B113</td>
<td>9</td><td>50</td>
<td>Black</td>
<td>2.15</td>
<td class="td1"><input type ="text" name ="qnty1" size="3" 

onchange="CalculateTotal()" id="qnty1" /></td>
<td class="td1"><input type ="text" name ="tot1" size ="3" 

id="tot1" /></td></tr>
<tr><td>Nut</td>
<td>N234</td>
<td>5</td>
<td>N/A</td>
<td>Silver</td>
<td>0.45</td>
<td class="td1"><input type ="text" name ="qnty2" size 

="3" onchange="CalculateTotal()" id="qnty2" /></td>
<td class="td1"><input type ="text" name ="tot2"  size 

="3" id="tot2" /></td></tr>
<tr><td>Washer</td>
<td>W359</td>
<td>8</td>
<td>N/A</td>
<td>Silver</td>
<td>0.30</td>
<td class="td1"><input type ="text" name="qnty3" size ="3" 

onchange="CalculateTotal()" id="qnty3" /></td>
<td class="td1"><input type ="text" name ="tot3" size ="3" 

id="tot3" /></td></tr>

 <tr><td colspan = "6" class="td2">Grand Total:
</td><td class="td1"><input type ="text" name ="totqnty" 

size ="3" id="totqnty" /></td>
<td class="td1"><input type ="text" name ="totamount" size 

="3" id="totamount" /></td></tr>
</table></td></tr>

<tr><td colspan="2" align="center"><input type = "reset"  

value = "Reset" />&nbsp;
<input type = "submit"  value = "Submit" 

/></td></tr></table>

  </form>
	
	</td>
</tr>
	</td>
</tr>

   
  </table></body>
</html>

I want to refresh the calculations on a form without submitting the form. I have tried two different JavaScript button codes, and I'm wondering if there is a reason for using one over the other, and if there is something else better for cross-browser use.

1) [ICODE] _doClick('$Refresh', this, '_self')

2) [ICODE] _doClick('$Refresh', this, null, null)

Sorry if I missed the answer to this by searching, but I did try. Advice is welcome.

Hey guys, I've never use JavaScript before so bare with me. But, I have a registration form, and I want to have a location field in it, and then a region field that changes depending on what the user set as their location. But, I cannot get it to work, and I have no idea of how to go about doing it. Here is the JavaScript I have been using so far:
Code:

    function toggleTable(select)
    {
       if(select.value == "uk")
        {
            select.value = "uk";
            document.getElementById("region2").style.visibility = "collapse";
            document.getElementById("region1").style.visibility = "visible";
       }
       else if(select.value == "usa")
       {
            select.value = "usa";
            document.getElementById("region1").style.visibility = "collapse";
            document.getElementById("region2").style.visibility = "visible";
       }

    }

and it does show the right region depending on what the user inputed, but when the page loads, all the fields show up until the user click on the location field, here is the code for that so you can test it out:

Code:

<tr><td>Location: </td><td><select name="location" onclick="toggleTable(this);">
                            <option value="none">Please Select One</option>
                            <option value="uk">UK</option>
                            <option value="usa">USA</option>
                        </select></td></tr>
                <tr id="region1"><td>Region: </td><td>
                        <select name="region">
                            <option value="uk1">uk1</option>
                            <option value="uk2">uk2</option>
                            </select></td></tr>
                        
                        <tr id="region2"><td>Region: </td><td>
                            <select name="region">
                            <option value="usa1">usa1</option>
                            <option value="usa2">usa2</option>
                        </select>
                    </td></tr>

Any help at all please?

I am not familiar with javascript only html, but I have researched this problem and found some solutions, but I am unsure what to do with them.

I have an html checkbox form that lists book titles. The user will click on the checkbox next to the titles that interest them. Then when they click submit, I want a pop-up box to appear with the titles they selected in a printable list.

I found this javascript code:

Code:

<script langauge="javascript" type="text/javascript">
function openPreview() {
    var myWin = window.open ("popup.htm","myWindowName","width=500,height=350");
    myWin.focus();
}
</script>

Then here is my html form code:

Code:

<form action="" form id= "myInput">
			<table width="523">
			<tr><td width="33"> <input type="checkbox" name="product" value="Ironman"></td>
 			<td width="229"><div align="left">Ironman</div></td> 
 			<td width="174">Chris Crutcher </td> 
 			<td width="56" align="right">&nbsp;</td></tr>
			<tr><td><input type="checkbox" name="product" value="Staying Fat for Sarah Byrnes">
 			<th><div align="left">Staying Fat for Sarah Byrnes </div></th> 
 			<td>Chris Crutcher </td> 
 			<td align="right"><tt>Realism</tt></td>
			</tr>
			<tr><td><input type="checkbox" name="product" value="The Watsons Go to Birmingham">
 			<th><div align="left">The Watsons Go to Birmingham </div></th> 
 			<td>Chrisopher Paul Curtis </td> 
 			<td align="right">&nbsp;</td>
			</tr>
	  </table>
        <input type="button" id="btnPreview" name="btnPreview" value="Preview" onclick="openPreview()" />
</form>

Then on the popup.htm page I have this code

Code:

<script language="javascript" type="text/javascript">
document.write(window.opener.document.getElementById("myInput").value);
</script>

This code has worked for me when the form is a textarea or a label, but I don't know how to use it with a checkbox form. I know that labeling the form "my input" only works for textarea or labels, so I understand why the pop-up menu says undefined. What do I need to do to get the checkbox data to appear.

Is it possible to use JavaScript to send a HTML FORM this way?
(By the way, this is a huge guess - I don't know JavaScript very well)

Code:

<SCRIPT type="text/javascript">
	function Cart1Function() {
		get.INPUT.quantity.value
		send.to.formsubmit1.php
	}
	function Cart2Function() {
		get.INPUT.quantity.value
		send.to.formsubmit2.php
	}
</SCRIPT>
<FORM action="?" method="post" name="form">
	<DIV>
		<INPUT type="text" name="quanitity">
		<INPUT type="submit" value="CART 1" onClick="Cart1Function">
		<INPUT type="submit" value="CART 2" onClick="Cart2Function">
	<DIV>
</FORM>

I want to make two forms sharing the same input (quantity).

This is the weirdest thing I've come across in awhile. I have some code that formats a input field for a date format. This code runs fine on all browser when the form tag isn't wrapped around the inputs. The second I wrap the form tag around the inputs everything messes up. The Javascript error I'm getting is "Object doesn't support this property or method." on line 45 which is the line of the date input field. I'm totally clueless what I'm doing wrong here. And so I'll leave it up to you the wonderful community to give me some help.

Thanks,
Jon W


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html leng="en">
<head>
<script type="text/javascript">
	function dob(val,e) {
		if(e.keyCode != 8) {
			if(val.length == 2 || val.length == 5) {
				if(val.match(/[\/]$/) != "/") {
				document.getElementById('dob').value += "/";
				}
			}
			var regex = /[a-zA-Z]|\+|\-|\&|\\|\(|\)|\%\|\$|\#|\@|\*|\_|\?|\>|\<|\,|\./;
			if(val.match(regex)) {
				newStr = val.replace(regex,'');
				document.getElementById('dob').value = newStr;
			}
		}
	}
</script>
<style type="text/css">@import url(/css/home.css);</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="/index.php"><img src="/images/logo.png" /></a></div>
</div>
<div id="container-arrow"></div>
<div id="container">
	<img src="/images/no_image.png" />
	
	<div id="sign-container">
	<span class="sign-header">
		Sign Up
	</span>
	<div id="sign-arrow-up"></div>
	<div id="sign-content">
	<form method="post" action="/account/index.php" name="sign">
		<label for="email">Email</label><input name="email" class="sign-inputs" type="text" />
		<p>
		</p>
		<label for="password">Password</label><input name="password" class="sign-inputs" type="password" />
		<p>
		</p>
		<label for="dob">Date Of Birth</label>
		<input type="text" name="dob" style="text-align:center;" maxlength="10" class="sign-inputs" id="dob" value="MM/DD/YYY" onkeyup="dob(this.value,event);" onkeydown="dob(this.value,event);" onfocus="if(this.value=='MM/DD/YYY') this.value='';" title="MM/DD/YYY" />
		<p>
		</p>
		<input name="submit" type="submit" class="sign-submit" value="Sign Up" />
	</form>
	</div>
	</form>
	</div>
</div>
</div>
</body>
</html>

Hello All,

I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N.

Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total.

Code:

<form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'>

<table border="box" width="100%">
<tr>
<td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td>
</tr>
</table>

{foreach value=fy from=$php_array}
<table>
<tr>
<td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td>
</tr>
</table>
{/foreach}

</form>

Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =)

I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code:
Code:

<fieldset>
<legend><strong>Question 1</strong></legend>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
    TestVar =form.inputbox.value;
    alert ("You typed: " + TestVar);
}
function writeText (form) {
    form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us."
}
</SCRIPT>
<form name="myform" action="" method="GET">
    <label for="question">Why is the Sky Blue?</label><br><br>
    <input name="inputbox" value="" type="text" style="width: 287px; height: 112px">
    <p>
    <input id="question" value="Check Answer" onclick="writeText(this.form)" type="button">
    </p>
</form>
</fieldset>

Any help would be much appreciated in terms of direction.

Thank you.

I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page.


This is my current code:
Code:

<html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "") 
{
alert("No Item Chosen")
}
else 
{
chosen = ""
len = document.form1.c1.length

for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}

if (chosen == "") {
alert("No Color Chosen")
}
}
else {

itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}


</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>




<form name="form1">

<h4>What item would you like to buy?</h4>


<input type="text" name="item1" value="" /><br />

<br/><br/>

<h4>Color</h4>

<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />

<br/><br/>

<h4>Size</h4>

<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>





<br/><br/>

<button onclick="processform()">Purchase</button>

<br/><br/>

<textarea rows="2" cols="40" name = "txtarea1">  </textarea> 
</form>


</body>
</html>

When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong?

Hello,

I am nearing completion on the modification of a Javascript/Html Order Form.
The problem arises when I click on 'Submit Order' after filling in details and choosing a product. For some reason, the pop up box shows the correct product, but it shows the $ Total from the previous box in the table.

Thank you all for your time in looking into this:

Code:

<html>

<head>

<title>JS Order</title>

 

<script language="JavaScript">



<!-- Start hiding from older browsers.



//  This function displays the nag screen when a field hasn't been filled in.

function nag(form, field, x)

{       

        ufield=field.toUpperCase();

        alert("Details missed " + ufield + "!" + "\n\nPlease fill in the field and submit the form again.");

        form.elements[x].focus();

}





//  This function is used to  round the tax amount to the nearest hundreths.

function roundPrice(price)

{

  //  save a copy of the price in case it is an even dollar amount.

  var workPrice = price;



  // Make the price a string by adding a string 0 to the end.

  workPrice  += "0"; 



  // Find out where the decimal point is.

  var pointIndex = workPrice.indexOf(".",0);



// If there is a decimal point now check to see if it needs to be rounded up.

if (pointIndex >= "0") {



  //  Set an index for the thousands digit.

  var thousands = pointIndex +3;



  // if the third number past the decimal point is greater than or 

  // equal to 5, then we need to round up the hundredth digit.

  if (workPrice.charAt(thousands) >= "5") 

  {

   //  Turn the price into a number.

   workPrice=parseFloat(price);

   

   //  Round up the price.

   workPrice=workPrice + .01;



   //  Turn it back into a string.

   workPrice=workPrice + "0";



   //  Cut off the thousands on down.

     rPrice = workPrice.substring(0,thousands);



   } else {



   //  We didn't need to round the price up so cut off the

   //  thousands on down and return the price

   rPrice = workPrice.substring(0,thousands);

   }



//  Its an even dollar amount so just put on the .00 on the end.

} else {

  rPrice = price + ".00";

}



 // Now return the rounded price.

 return rPrice;

}





//  This function calculates the form.

function updatePrice()

{

   //  Reset the subtotal price

   var addPrice = 0;



   //  Reset the running total prices.

   var nowPrice = 0;



   //  Reset the nubmer of part ordered.

   var partcount = 0;



   //  Step through each element in the form.

   for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)

   {



      //  If the form element has "qty" in the name then we need to process it.

      if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty')

      {



         // If the item has a quantity of not 0, then we need to process it.

         if (self.document.forms[0].elements[i].value != 0)

         {



			// Locate the cost

			costIndex = i + 1;



            //  Increment the part counter.

            partcount++;



            //  Get the actual value for the quantity.

            nowQty = eval(self.document.forms[0].elements[i].value);



            //  Get the cost of the item.

            nowPrice = eval(self.document.forms[0].elements[costIndex].value);



            //  Calculate the extended cost (i.e., quanty * cost).

            nowPrice = eval(nowPrice * nowQty);



	    //  Add to the subtotal.

            addPrice += nowPrice;

         }  

      }

   }



   //  Round off the subTotal price.

   subTotal=roundPrice(addPrice);



   //  Put the sub total price into the form.

   self.document.forms[0].subtot.value = subTotal;



   // Figure the tax.

   tax = parseFloat(self.document.forms[0].taxrate.value * addPrice);



   //  Round off the tax price.

   totalTax = roundPrice(tax);



   //  Put the total tax into the form.

   self.document.forms[0].totaltax.value = totalTax;





   // Start figuring the total including tax.

   //  Turn the price string into a number.

   subPrice =  parseFloat(addPrice);



   // Turn the tax string into a number.

   addTax = parseFloat(totalTax);



   //  Add the tax and subtotal to get the total price.

   totalPrice = (addTax + subPrice);



   //  Round the total price.

   finalPrice = roundPrice(totalPrice);



   //  Update the form with the total cost.

   self.document.forms[0].cost.value = finalPrice;



   //  Update the form with the number of line items.

   self.document.forms[0].items.value = partcount;

}



function orderIt(form)

{

  //  If the order is zero, display a message.

  if (form.cost.value == "0.00")

  {

      alert("You have not ordered anything.  Please select an item and re-submit your order.")

  } else {



    if (form.elements[0].value == "")

        {

                nag(form, form.elements[0].name,0)

        } else if (form.elements[1].value == "")

        {

                nag(form, form.elements[1].name, 1)

        } else if (form.elements[2].value == "")

        {

                nag(form, form.elements[2].name, 2)

        } else if (form.elements[4].value == "")

        {

        nag(form, form.elements[4].name, 4);

        } else if (form.elements[5].value == "")

        {

        nag(form, form.elements[5].name, 5);

        } else if (form.elements[6].value == "")

        {

        nag(form, form.elements[6].name, 6);

        } else if (form.elements[10].value == "")

        {

        nag(form, form.elements[10].name, 10);



     } else {

   var message = "You have ordered the following items:\n";

   message = message + "Qty\tCost\tDescription\n";



   // Step through each element in the form.

   for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++)

   {



      //  If the form element has "qty" in the name then we need to process it.

      if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty' && self.document.forms[0].elements[i].value !=0)

      {



         //  Get the quantity.

         qtyItem = self.document.forms[0].elements[i].value; 



		 costItem = self.document.forms[0].elements[i-2].value;

   

         //  Get the description.

         descItem = self.document.forms[0].elements[i-1].value;



         //  add the line item to the confirmation message.

         message = message + qtyItem + "\t" + costItem + "\t" + descItem + "\n";

      }

      

   }



    message = message + "\nOrder total: $" + self.document.forms[0].cost.value

	if (confirm(message)) 

	{ 

	self.document.forms[0].submit();

	}

      }

   }

}

// end hiding from older browsers -->

</script>



</head>

<body bgcolor="white" text="black" alink="red" vlink="purple" link="blue"  background="images/bkgrd.gif"> 

<p>

<table width=440>

<tr><td>

<p>

<form name=options method=post action="/cgi-bin/order.cgi">

<table border="0" width="100%" id="table1">

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">&nbsp;First Name:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=FirstName size=30 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Last Name:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=LastName size=30 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Address Line 1:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=Address1 size=40 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Address Line 2:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=Address2 size=40 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Suburb:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=Suburb size=25 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">City:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=City size=25 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Postal Code:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=PostalCode size=15 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Country:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=Country size=15 maxlength=40 value=NZ></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Home Phone:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=HomePhone size=20 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Mobile Phone:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=MobilePhone size=20 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">E-Mail Address:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=EmailAddress size=30 maxlength=40></font></td>

	</tr>

	<tr>

		<td width="109" align="right"><font face="Arial" size="2">Domain Name:</font></td>

		<td width="15">&nbsp;</td>

		<td align="left"><font size="1" face="Arial"> 

		<input type=text name=DomainName size=30 maxlength=40></font></td>

	</tr>

</table><br>

<font face="Arial" size="2">Enter a quantity of 1 into the package you require.<br><br>

Monthly payments incur a $2 per month administration fee.

Set up is <b>free</b> for all packages (for a limited time).</font><br><br>

<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">

<tr>

    <th><font face="Arial" size="2">Description</font></th>

    <th><font face="Arial" size="2">Qty</font></th>

    <th><font face="Arial" size="2">Total</font></th>

</tr>

<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc1" value="Basic Monthly">

	</font><font face="Arial" size="2">Basic Package <BR><B> Pay Monthly</B></font></td>

	<td align=center><font size="1" face="Arial"><input type=text name="qty1" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost1" value="11.99">

	</font><font face="Arial" size="2">$11.99</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc2" value="Basic PrePay 1 Year">

	</font><font face="Arial" size="2">Basic Package - $9.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>

	</font></td>

	<td align=center><font size="1" face="Arial"><input type=text name="qty2" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost2" value="109.89">

	</font><font face="Arial" size="2">$109.89</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc3" value="Basic PrePay 2 Years">

	</font><font face="Arial" size="2">Basic Package - $8.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>

	</font></td>

    <td align=center><font size="1" face="Arial"><input type=text name="qty3" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost3" value="197.78">

	</font><font face="Arial" size="2">$197.78</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc4" value="Basic PrePay 3 Years">

	</font><font face="Arial" size="2">Basic Package - $7.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>

	</font></td>

    <td align=center><font size="1" face="Arial"><input type=text name="qty4" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost4" value="263.67">

	</font><font face="Arial" size="2">$263.67</font></td>

</tr>

<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc13" value="Deluxe Monthly">

	</font><font face="Arial" size="2">Deluxe Package<BR><B> Pay Monthly</B></font></td>

	<td align=center><font size="1" face="Arial"><input type=text name="qty13" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost13" value="21.99">

	</font><font face="Arial" size="2">$21.99</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc14" value="Deluxe PrePay 1 Year">

	</font><font face="Arial" size="2">Deluxe Package - $19.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B>

	</font></td>

	<td align=center><font size="1" face="Arial"><input type=text name="qty14" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost14" value="219.89">

	</font><font face="Arial" size="2">$219.89</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc15" value="Deluxe PrePay 2 Years">

	</font><font face="Arial" size="2">Deluxe Package - $18.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B>

	</font></td>

    <td align=center><font size="1" face="Arial"><input type=text name="qty15" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost15" value="417.78">

	</font><font face="Arial" size="2">$417.78</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc16" value="Deluxe PrePay 3 Years">

	</font><font face="Arial" size="2">Deluxe Package - $17.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B>

	</font></td>

    <td align=center><font size="1" face="Arial"><input type=text name="qty16" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center><font size="1" face="Arial"><input type=hidden name="cost16" value="593.67">

	</font><font face="Arial" size="2">$593.67</font></td>

</tr>



</table>

<font face="Arial" size="2">

<br>

</font>

<table border=1 cellpadding=2 width="500" bordercolorlight="#808080">

<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc17" value="Blogging Software Installation Service">

	</font><font face="Arial" size="2">Installation Service<BR><B> Blogging software 

	(Wordpress etc)</B></font></td>

    <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty17" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost18" value="39.00">

	</font><font face="Arial" size="2">$39.00</font></td>

</tr>



<tr>

    <td align=center><font size="1" face="Arial"><input type=hidden name="desc19" value="Shopping Cart Installation Service">

	</font><font face="Arial" size="2">Installation Service<BR><B> Shopping Cart 

	(ZenCart, osCommerce, Cubecart etc)</B></font></td>

    <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty19" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td>

    <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost19" value="349.00">

	</font><font face="Arial" size="2">$349.00</font></td>

</tr>



</table>

<p>

<table width=500>

<tr>

    <td align=right>

<div align="left">

<table cellpadding=1 cellspacing=1>

<tr>

     <td colspan=2 align=right><font face="Arial" size="2">Sub Total: $</font><font size="1" face="Arial"><input name=subtot value="0.00" size=10 maxlength=10 onChange="updatePrice()"></font></td>

</tr>

<tr>

     <td valign=bottom><font size="1" face="Arial"><input type=hidden value=".15" name=taxrate size=5 maxlength=5 onchange="updatePrice()">

		</font></td>

     <td align=right><font face="Arial" size="2">GST: $</font><font size="1" face="Arial"><input type=text name=totaltax size=10 maxlength=10 value="0.00" onChange="updatePrice()"></font></td>

</tr>

<tr>

     <td colspan=2 align=right><font face="Arial" size="2">Total Order: $</font><font size="1" face="Arial"><input name="cost" type=text value="0.00" size=10 maxlength=10  onChange="updatePrice(this.form)"><input type=hidden maxlength=4 size=4 name=items></font></td>

</tr>

</table>

</div>

<p>

<font size="1" face="Arial">

<input type=button value="Submit Order" onClick="orderIt(this.form);" style="float: left"></font><font face="Arial" size="2">

</font><font size="1" face="Arial"> 

<input type=reset value="Clear Order" style="float: left"><font face="Arial" size="2">

</form>

</font></font>

</center>

</body>

</html>

CHANGE XX to TT
CHANGE zero in c0m to O becoming com
CHANGE YYY to WWW

hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ

first an example of what im trying to do:
when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically.
this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways.

Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself.

How do I fix it?


Thank you!!!!

Hi

I am trying to write a simple script for html form validation before going on to write a more complicated script for the full form which will eventually be on the web page. However, I cannot tell if the javascript is executing or not, as no alert messages come up. If I fill in the form with blanks (which is what the function checkform() checks for) then it should display an alert on submission and return false. Otherwise, returns true.

I need to get this licked before going on to the more complex coding, but I really can't see why this doesn't appear to work. I'd be most grateful if some kind soul out there could have a look at it for me.... Links below.

Thank you in anticipation!

http://www.kellyresources.co.uk/onli...ment_test.html
http://www.kellyresources.co.uk/checkform.js

I'm fairly new to javascript and would appreciate any help offered. I'm trying to use the input from an HTML form to interact with a switch statement in javascript. I want my users to input a few specific words, and have each word they input redirect them to a specific page.

Below is what I've currently come up with. I cannot get it to function properly as it continues to display the default output regardless of the input

Code:

 <script language="JavaScript" type="text/javascript" > 
    <!--
function checkform ( form )
{
    var favcolour =("form.data", "")
    switch (favcolour) {
      case "red":
        window.location="index.html";
        break;
      case "green":
        window.location="index.html#tips";
        break;
      case "blue":
        window.location="index.html#blue";
        break;
      default:
        document.writeln("Invalid Input");
      };
	  }
    // -->
  </script>
 </head>
 <body>
 <form action="" method="post" onsubmit="return checkform(this);"> 
  <input type="text" name="data" />

Again any help would be greatly appreciated!