4 Replies - 1110 Views - Last Post: 04 April 2011 - 09:23 PM

#1 monicojr84  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 11-February 11

Javascript doesn't work any more

Posted 04 April 2011 - 05:44 PM

Hi I made this html doc and it has an external javascript doc to calculate the cost for
a users choices. It worked fine when I had form tags around all the input text boxes, checkboxes,
radiobuttons, and menu. I took out all of the those extra from tags and put an opening form tag at the
beginning of the body and a closing form tag at the end of the body. I did this to make a php form
handling doc work.
Can anyone see why it doesn't work?

<!-- estimates.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTT/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
	  <title> MackPainters Home </title> <!-- Title appears in web browser tab -->
	  <link href="mackpainter.css" rel="stylesheet" type="text/css" /> <!-- file uses external style sheet -->
	  <link href="favicon.ico" rel="icon" type="image/x-icon" /> <!-- Icon appears before URL bar -->
	  <script type="text/javascript" src="mackp.js"> </script>
	  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
	</head>
	
	<body onload ="checkCookie()">
	  <form id="myForm" action="mackpaint.php" method="post">
	    <div id="container" >
	      <!-- Use Banner for the header -->
	      <h1 id="banner" > <img src="logo.png" alt=" MackPainters" width="619" height="117" />
	      </h1>
				
	       <!-- navigation bar -->
	       <div id="nav">
		<ul>
		  <li> <a href="index.html">Home</a> </li> <br/>
		  <li> <a href="services.html">Services</a> </li> <br/>
		  <li> <a href="estimates.html">Estimates</a> </li> <br/>
		  <li> <a href="references.xml">References</a> </li>
		 </ul>
		</div>
			
		<!-- Content -->
		<div id="content">
		  <h3> Serving the Northern Boston Suburbs since 1986 </h3> <br/>
		  <div id="info">
		    <h2>Please Complete the Form to Receive an Estimate</h2>
		    <p>Your Name: <input type="text" id="name" name="name"/>(Firstname LastName)</p>
		    <p>Your Telephone Number: <input type="text" id="phone" name="phone"/> ((XXX)XXX-XXXX)</p>
		  </div>
				
		 <!-- table with form data -->
		 <hr/ color=#000000>
		 <table border="3" bgcolor="#29447B">
		  <tr> <!-- row 1 -->
		    <th>Services</th>
		    <th>Price</th>
		    <th>Check for Service</th>
		    <th>Options</th>
		   </tr>
		   <tr> <!-- row 2 -->
		     <th>Interior</th>
		     <th>$100.00 per room</th>
		     <td> <input type="checkbox" id="interior" name="interior"/> </td>
		     <td> <p id = "type">
			<input type="radio" name="choice" value="Textured"/> Textured
			<input type="radio" name="choice" value="Painted"/> Painted
			<input type="radio" name="choice" value="Papered"/> Papered
			 </p>
		      </td>
		     </tr>
		     <tr> <!-- row 3 -->
			<th>Exterior</th>
			<th>$150.00 per job</th>
			<td> <input type="checkbox" id="exterior" name="exterior"/> </td> 
			<td> 
			  <input type="checkbox" id="washed" name="washed"/> Washed
			  <input type="checkbox" id="painted" name="painted"/> Stained/Painted
			  <input type="checkbox" id="touch" name="touch"/> Touched-Up
			</td>
		      </tr>
		      <tr> <!-- row 4 -->
			<th>Wallcovering</th>
			<th>$45.00 per roll Enter 
			  <p>Enter Number of Rolls <input type="text" id="rolls" name="rolls" size="1" value="0"/></th>
			<td> <input type="checkbox" id="wall" name="wall"/> </td>
			<td> <select id="menu" name="menu">
			       <option value="nothing" selected="selected">Select a Style</option>
			       <option>Essex</option>
			       <option>Stratham</option>
			       <option>Waverly</option>
			       </select>
			 </td>
			</tr>
		     </table>
		     <br/>
			
		     <div id="request">
		       <!-- text area -->
		       <p>Special Requests:</p>
		       <textarea id="req" name="req" rows="3" cols="50"></textarea>
		
		       <!-- Submit and Reset buttons -->
		       <p> <input type="submit" name="submit" value="Submit Query" />
		       <input type="reset" value="Reset"/> </p>
		       <p>Total Cost: $ <input type="text" id="cost" name="cost" size="10"/></p>
		       <p>You Chose: <input type="text" id="chose" name="chose" size="80"/></p>
		       </div>
		       <hr/ color=#000000>
		       <p> <center> Thanks for your inquiry <label id="name2">
                            </label> -- We will get back to you shortly</center></p>
		       <br/>
		     </div>
			
		     <!-- Footer -->
		     <div id="footer">  
			Copyright &copy; 2011 MackPainters <br/>
			<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
		     </div>	
		   </div>
		</form>
		<script type="text/javascript" src="mackpreg.js"></script>
	</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Javascript doesn't work any more

#2 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: Javascript doesn't work any more

Posted 04 April 2011 - 05:55 PM

Can we see the Javascript external file, please? All the XHTML looks moderately compliant, and shouldn't produce that big of a Javascript error.
Was This Post Helpful? 0
  • +
  • -

#3 monicojr84  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 27
  • Joined: 11-February 11

Re: Javascript doesn't work any more

Posted 04 April 2011 - 06:03 PM

sure, The weird thing is that my two onblur events work but not the onsumbit.


//mackp.js - This file contains all scripting code for the mackpainters estimates page.
//Author: Steven Monico, 2/24/2011

//This function handles the name validation
function nameValid()
{ 	var name = document.getElementById("name").value;
	var nameReg = /^[A-Z][a-z]+\s[A-Z][a-z]+$/;
	
	//Check for validation
	if(nameReg.test(name) != true)
		alert("Invalid format, Please try again.\n Firstname space Lastname.");
}//End of nameValid

//This function handles the phone # validation
function phoneValid()
{ 	var phone = document.getElementById("phone").value;
	var phoneReg = /^\(\d{3}\)\d{3}-\d{4}$/;
	
	//Check for validation
	if(phoneReg.test(phone) != true)
		alert("Invalid format, Please try again.\n (XXX)XXX-XXX.");
}//End of nameValid

//This function validates the service forms and then calculates the cost
function calculate()
{	var userInput = document.getElementById("name").value;  //Stores customer name
	var rolls = document.getElementById("rolls").value;  //number of wallcovering rolls
	var type = document.getElementById("type");  //radio button form
	var interior = document.getElementById("interior");  //interior service
	var exterior = document.getElementById("exterior");  //exterior service
	var wall = document.getElementById("wall");  //wallcovering service
	var washed = document.getElementById("washed");  //washed exterior service
	var painted = document.getElementById("painted");  //painted/stained exterior service
	var touch = document.getElementById("touch");  //touched-p exterior service
	var menu = document.getElementById("menu");  //wallcovering menu
	var cost = 0.00;  //Stores cost of services
	var output = ""; //Stores services and options chosen
	
	setCookie("username", userInput, 365);
	
	//Convert rolls to int, cost to float, and output to string
	rolls = parseInt(rolls);
	cost = parseFloat(cost);
	output = output.toString();  
	
	//Interior services
	if(interior.checked)
	{  cost = cost + 100.00;
	  if(type.choice[0].checked)
		output = "Interior - Textured, ";
	  else if(type.choice[1].checked)
		output = output + "Interior - Painted, ";
	  else if(type.choice[2].checked)
		output = output + "Interior - Papered, ";
	  else
		alert("Please choose an interior option!");
	}//End if interior services
	
	//Exterior service
	if(exterior.checked)
	{ 	output = output + "Exterior ";
		if(washed.checked)
		{ cost = cost + 150.00;
		   output = output + "Washed ";
		}//washed
	  if(painted.checked)
		{ cost = cost + 150.00;
		  output = output + "Painted/Stained ";
		}//painted/stained
	  if(touch.checked)
		{ cost = cost + 150.00;
		  output = output + "Touched-Up";
	    }//touch-up
		output = output + ", ";
		//No options were selected
		if(washed.checked == false && painted.checked == false && touch.checked == false)
			alert("Please chose at least one\nexterior service option!");
	}//End of if exterior
		
	//Wallcovering Service
	if(wall.checked)
	{ //check number of rolls
	  if(rolls <=0)
		alert("Please enter the number of rolls!");
	  else if((rolls > 0)|| (rolls <= 25))
		{ cost = cost + (rolls * 45.00);
	      output = output + "Wallpaper - " + rolls + " rolls ";
		}//rolls
	  
	  //Test to see if a wallcovering option was chosen
	  if(menu.selectedIndex == 1)
		output = output + "Essex";
	  else if(menu.selectedIndex == 2)
		output = output + "Stratham";
	  else if(menu.selectedIndex == 3)
		output = output + "Waverly";
	  else if(menu.selectedIndex != 1 || menu.selectedIndex != 2 || menu.selectedIndex != 3)
		alert("Please chose a wallcovering option!");
	}//End of if wallcovering

	//Output cost and chosen services to textboxes
	document.getElementById("cost").value = cost;
	document.getElementById("chose").value = output;
	
	//Output inquirers name to bottom of web page
	document.getElementById("name2").innerHTML = userInput;
}//End of calculate

function setCookie(c_name,value,exdays)
{ var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value;
}//End of setCookie

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
	{
    return unescape(y);
	}
  }
}//End of getCookie

function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
}



and also
///mackpreg.js - This file registers the events for the estimates page
//Author: Steven Monico 2/24/2011

//name validation
document.getElementById("name").onblur = nameValid;
document.getElementById("phone").onblur = phoneValid;
document.getElementById("myForm").onsubmit = calculate;


This post has been edited by monicojr84: 04 April 2011 - 06:04 PM

Was This Post Helpful? 0
  • +
  • -

#4 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: Javascript doesn't work any more

Posted 04 April 2011 - 06:17 PM

Okay, I think I have your solution:
Instead of creating a whole seperate mackpreg.js file to just contain your events (which I've never done that way, you may not be able to?), simply put event handlers into your main page. Then you can get rid of the external script at the bottom of the page. (Example:onblur="javascript:nameValid();")

It worked for me. Please let me know if it works for you. :)
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,020
  • Joined: 08-June 10

Re: Javascript doesn't work any more

Posted 04 April 2011 - 09:23 PM

I think the onsubmit does work. you only donít see it because you submit the form afterwards.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1