Thursday, July 30, 2009

I'm am trying to learn js/css & HTML using a book a guy gave me. Can you show me the code to make this work?

When more than, or less than ten numbers are typed in the “phone area” a pop up (Alert! Number must contain 10 digits) message will appear. When a “number” is typed in a name section a pop up will happen (Alert! No numbers allowed) . When a form area is left blank a pop up will occur (Alert! All fields must be complete) and not let you proceed until it is corrected. I need the code to make this happen in the following code and do not know where to begin. Can anyone show me?





%26lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/tr/xhtml1/dtd/xhtml...


%26lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"%26gt;





%26lt;head%26gt;


%26lt;style type="text/css"%26gt;





#container {


height: ;


width: 760px;


border: 1px solid gray;


margin: 10px;


margin-left: auto;


margin-right: auto;


padding: 10px;


background-color: #FFFF00;


}





#banner {


padding: 5px;


margin-bottom: 5px;


background-color: #111488;


}





#content {


padding: 5px;


background-color: yellow;


}





#sidebar-a {


float: left;


width: 130px;


margin: 0;


padding: 5px;


background-color: #169B99;


}





#sidebar-b {


float: right;


width:130px;


margin: 0;


padding: 5px;


background-color: #F7C66B;


}





#footer {





padding: 5px;


margin-top: 50px;


background-color: rgb(213, 219, 225);


}


body {


background-color: #FFFF00;


}


.style1 {color: #FFFFFF}





%26lt;/style%26gt;





%26lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"%26gt;





%26lt;script%26gt;





var dayarray=new Array("Sunday","Monday","Tuesd...


var montharray=new Array("January","February","Ma...





function getthedate(){


var mydate=new Date()


var year=mydate.getYear()


if (year %26lt; 1000)


year+=1900





var day=mydate.getDay()


var month=mydate.getMonth()


var daym=mydate.getDate()


if (daym%26lt;10)


daym="0"+daym





var hours=mydate.getHours()


var minutes=mydate.getMinutes()


var seconds=mydate.getSeconds()


var dn="AM"


if (hours%26gt;=12)


dn="PM"


if (hours%26gt;12){


hours=hours-12


}


if (hours==0)


hours=12


if (minutes%26lt;=9)


minutes="0"+minutes


if (seconds%26lt;=9)


seconds="0"+seconds





var cdate="%26lt;small%26gt;%26lt;font color='e6172b' face='Arial'%26gt;%26lt;b%26gt;"+dayarray[day... "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+second... "+dn


+"%26lt;/b%26gt;%26lt;/font%26gt;%26lt;/small%26gt;"


if (document.all)


document.all.clock.innerHTML=c...


else if (document.getElementById)


document.getElementById("clock...


else


document.write(cdate)


}


if (!document.all%26amp;%26amp;!document.getE...


getthedate()


function goforit(){


if (document.all||document.getEle...


setInterval("getthedate()",100...


}


%26lt;/script%26gt;





%26lt;/head%26gt;





%26lt;body onLoad="goforit()"%26gt;





%26lt;div class="style1" id="banner"%26gt;


%26lt;div align="center"%26gt;%26lt;strong%26gt;We Welcome your comments! %26lt;/strong%26gt;%26lt;/div%26gt;


%26lt;/div%26gt;


%26lt;div align="center"%26gt;%26lt;/div%26gt;





%26lt;div id="sidebar-a"%26gt;%26lt;img src="backleft.gif" alt="BackgroundL" width="100" height="1201" /%26gt; %26lt;/div%26gt;





%26lt;div id="sidebar-b"%26gt;%26lt;img src="backleftREVISED.gif" alt="BackgroundR" width="100" height="1201" /%26gt; %26lt;/div%26gt;





%26lt;br%26gt;


%26lt;br%26gt;


%26lt;CENTER%26gt;


%26lt;H2%26gt;AmeriMex Restaurant



Comment Form



"Tell us what you think"






%26lt;span id="clock"%26gt;%26lt;/span%26gt;






%26lt;/h2%26gt;


%26lt;/center%26gt;


%26lt;hr%26gt;


%26lt;h4%26gt;Please fill out the following form


and press the SUBMIT button below:%26lt;/h4%26gt;





%26lt;FORM METHOD="POST" ACTION="/cgi-bin/scripts/restc...





%26lt;strong%26gt;Your E-mail Address:%26lt;/strong%26gt;


%26lt;INPUT SIZE=40 NAME="EMAIL"%26gt;










%26lt;strong%26gt;Your Name: %26lt;/strong%26gt;


%26lt;INPUT SIZE=40 NAME="NAME"%26gt;










%26lt;strong%26gt;Your Phone Number:%26lt;/strong%26gt;


%26lt;INPUT SIZE=40 NAME="PHONE"%26gt;


%26lt;p%26gt;


%26lt;strong%26gt;Restaurant Name:%26lt;/strong%26gt;


%26lt;SELECT NAME="RESTAURANT"%26gt;


%26lt;OPTION SELECTED%26gt;SELECT OR FILL-IN OTHER BELOW


%26lt;OPTION%26gt;AmeriMex Cove INN, Miami


%26lt;OPTION%26gt;AmeriMex of Evansville, IN


%26lt;OPTION%26gt;AmeriMex of Old Vincennes, IN


%26lt;OPTION%26gt;AmeriMex Family INN, Chicago, IL


%26lt;OPTION%26gt;AmeriMex, Tulsa, OK


%26lt;/SELECT%26gt;


%26lt;/p%26gt;





%26lt;strong%26gt;Choose One Only%26lt;/strong%26gt;


%26lt;p%26gt;


%26lt;strong%26gt;Name if "Other":%26lt;/strong%26gt;


%26lt;INPUT SIZE=40 NAME="Other"%26gt;


%26lt;/p%26gt;








%26lt;center%26gt;


%26lt;strong%26gt;Quality of Food%26lt;/strong%26gt;


%26lt;/center%26gt;


%26lt;center%26gt;


(Please Check One Only)


%26lt;/center%26gt;


%26lt;P%26gt;


%26lt;DD%26gt;%26lt;INPUT TYPE="radio" NAME="QUALITY" VALUE="Unbelievable!"%26gt;


Unbelievable! Unmatched by any restaurant around! %26lt;/DD%26gt;


%26lt;DD%26gt;%26lt;INPUT TYPE="radio" NAME="QUALITY" VALUE="Good Food!"%26gt;Good Food! %26lt;/DD%26gt;


%26lt;DD%26gt;%26lt;INPUT TYPE="radio" NAME="QUALITY" VALUE="Will Do!"%26gt;Will Do In A Pinch!%26lt;/DD%26gt;


%26lt;DD%26gt;%26lt;INPUT TYPE="radio" NAME="QUALITY" VALUE="Cockroach!"%26gt;Even the Cockroaches Stay Away! %26lt;/DD%26gt;%26lt;/p%26gt;


%26lt;P align="left"%26gt;Further Comments:%26lt;br%26gt;


%26lt;TEXTAREA NAME="MESSAGE_TEXT" ROWS=3 COLS=30%26gt;%26lt;/TEXTAREA%26gt;%26lt;/P%26gt;


%26lt;hr%26gt;





%26lt;center%26gt;


%26lt;strong%26gt;Quality of Service%26lt;/strong%26gt;


%26lt;/center%26gt;


%26lt;center%26gt;


%26lt;p%26gt;(Please Check One Only)%26lt;/p%26gt;


%26lt;p align="left"%26gt;


%26lt;INPUT TYPE="radio" NAME="SERVICE" VALUE="King"%26gt;I Was Treated Like a King!



%26lt;INPUT TYPE="radio" NAME="SERVICE" VALUE="Better"%26gt;Better Than Average!



%26lt;input type="radio" name="SERVICE" value="Myself"%26gt;Should Have Served Myself!



%26lt;input type="radio" NAME="SERVICE" VALUE="Comet"%26gt;


The Wait Staff Came Around As Often as Haley's Comet. %26lt;/p%26gt;





%26lt;/center%26gt;


%26lt;DD%26gt;


%26lt;P align="left"%26gt;


Further Comments:%26lt;br%26gt;


%26lt;TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30%26gt;%26lt;/TEXTAREA%26gt; %26lt;hr align="center"%26gt;





%26lt;div align="center"%26gt;


%26lt;INPUT TYPE="submit" VALUE="SUBMIT"%26gt;


%26lt;INPUT TYPE="reset" VALUE="Clear Form"%26gt;


%26lt;/form%26gt;





%26lt;hr align="center"%26gt;


%26lt;div align="center"%26gt;%26lt;a href="index.html"%26gt;Home%26lt;/a%26gt; :: %26lt;a href="aboutUS.html"%26gt;About%26lt;/a%26gt; :: %26lt;a href="Locations_Page.html"%26gt;Loc... :: %26lt;a href="MenuPage.html"%26gt;Menu%26lt;/a%26gt; :: %26lt;a href="Employment.html"%26gt;Employm... /%26gt;


%26lt;/div%26gt;











%26lt;/body%26gt;


%26lt;/html%26gt;

I'm am trying to learn js/css %26amp; HTML using a book a guy gave me. Can you show me the code to make this work?
First of all, please follow coding standards. I helped you with a question yesterday, and I am seeing the exact same errors:





-Don't use capital letters for tags, i.e %26lt;P%26gt;, %26lt;DIV%26gt;, etc.


-Don't use depracated properties, i.e. %26lt;center%26gt;, align=


-Don't forget to close tags, i.e. %26lt;option... /%26gt; (remember each tag MUST have a '/' before the final '%26gt;'


-Put quotes around properties


-%26lt;title%26gt; must be in %26lt;head%26gt;





Also, take a look at your post, Yahoo! Answers cuts off anything longer than 30 characters, so a lot of your code is missing.





Here is a programming tip that will save you countless hours of programming:


It is often a lot easier to find scripts already written than to write your own. Just search for what you are looking for if it would seem somewhat common and you will usually find it.





I searched for 'javascript telephone number validation' and the first result looks like a perfect fit for what you need:


http://www.smartwebby.com/DHTML/phone_no...





Good luck in your coding, and keep on working at it!
Reply:This isn't an answer, but some advice about user interfaces. Humans like to type what they want, and since you can easily have the program re-format the data, don't force humans to conform to your program, make your program conform to humans. Here's an example of how to remove non-digits from a string using a regular expression:





%26lt;html%26gt;%26lt;body%26gt;%26lt;script%26gt;


var foo = "asd2345sdf";


var bar = foo.replace(/[^0-9]/g, "");





document.write("foo = " + foo + "%26lt;br%26gt;");


document.write("bar = " + bar + "%26lt;br%26gt;");


%26lt;/script%26gt;%26lt;/body%26gt;%26lt;/html%26gt;





If you process the phone number with that String.replace() method before you validate it, users may enter phone numbers as "800-555-1212" instead of "8005551212". This is much more user friendly.

orange

No comments:

Post a Comment