Menu
Hey guys. I made a contact form for my website originally in PHP. I wanted to change it to JavaScript because taht is the preferred way. I am new to this and was looking for some help. Originally I had the form in my HTML file using a seperate PHP file for error checking. For JavaScript do I have to make a seperate page and call to it like the last time?? I have put it all on my HTML page and where it was calling for the php page, I also put the JavaScript code. When I go to my site, the error checking is not working at all. There must be something wrong, but I haven’t been able to point it out and I am very new to JavaScript. Also, when I go to my page and right click for the source code, the JavaScript I have in there does not show up. Below is my HTML code. I know my styles are sloppy and unorganized, sorry about that. Thanks for the help.
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Contact_Form</title>
</head>
<body>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”en-us” http-equiv=”Content-Language” />
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Contact Me</title>
<meta name=”description” content=”Ways to contact me”/>
<style type=”text/css”>
.style2 {
text-align: left;
}
.style3 {
font-family: “Copperplate Gothic Bold”;
font-size: xx-large;
color: #F8B57E;
}
.style4 {
font-size: xx-large;
font-family: “Copperplate Gothic Bold”;
letter-spacing: 6pt;
color: #F8B57E;
}
.style5 {
text-align: center;
}
.style6 {
text-align: center;
margin-top: 8px;
}
.style19 {
color: #F8B57E;
font-size: x-large;
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
}
.style40 {
text-decoration: none;
}
.style32 {
color: #F8B57E;
}
.style37 {
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
}
.style51 {
font-size: x-large;
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
}
.style52 {
text-align: right;
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
color: #F8B57E;
}
.style53 {
text-align: center;
margin-top: 8px;
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
font-size: x-large;
color: #F8B57E;
}
.style54 {
font-family: “Franklin Gothic Medium”, “Arial Narrow”, Arial, sans-serif;
color: #F8B57E;
}
</style>
<meta content=”Different ways to contact me” name=”description” />
<script type=”text/javascript” language=”javascript”>
//Following will validate the fields.When left blank it will pop up various messages.
function emailcheck(str) {
var at=”@”
var dot=”.”
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert(“Invalid Email address”)
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert(“Invalid Email address”)
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert(“Invalid Email address”)
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert(“Invalid Email address”)
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert(“Invalid Email address”)
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert(“Invalid Email address”)
return false
}
if (str.indexOf(” “)!=-1){
alert(“Invalid Email address”)
return false;
}
return true
}
function ValidateForm(){
var FirstName=document.MainForm.FirstNameTextBox
var LastName=document.MainForm.LastNameTextBox
var State=document.MainForm.StateDropDownBox
var PhoneNumber=document.MainForm.PhoneNumberTextBox
var EmailAddress=document.MainForm.EmailAddressTextBox
if ((FirstName.value==null)||(FirstName.value==””)){
alert(“Please enter your First Name.”)
firstname.focus()
return false
}
if ((LastName.value==null)||(LastName.value==””)){
alert(“Please enter your Last Name.”)
lastname.focus()
return false
}
if (State.selectedIndex==0){
alert(“Please select a State.”)
state.focus()
return false
}
if ((PhoneNumber.value==null)||(PhoneNumber.value==””)){
alert(“Please enter your Phone Number.”)
phone.focus()
return false
}
if ((EmailAddress.value==null)||(EmailAddress.value==””)){
alert(“Please enter a valid Email Address.”)
emailID.focus()
return false
}
if (emailcheck(EmailAddress.value)==false){
EmailAddress.value=””
EmailAddress.focus()
return false
}
return true
}
</script>
</head>
<body style=”color: #FFFFFF; background-color: #102541″>
<div id=”layer1″ class=”style2″ style=”position: relative; width: 1100px; height: 1375px; z-index: 1; margin-bottom: 50px; margin-left: auto; margin-right: auto; margin-top: 50px; border-style: solid; border-color: #F8B57E”>
<p class=”style5″ style=”height: 84px”> <br />
<br />
<span class=”style4″>Jonathan M. Palmieri</span></p>
<hr class=”style3″ noshade=”noshade” style=”width: 85%; height: 4px; margin-bottom: 0px” />
<p class=”style6″ style=”height: 34px; margin-top: 0px”>
<a class=”style40″ href=”index.html”>
<span class=”style19″>
Home</span></a><span class=”style19″> |
<a class=”style40″ href=”resume.html”><span class=”style32″>My Resume</span></a> |
<a class=”style40″ href=”HobbiesInterests.html”><span class=”style32″>Hobbies & Interests</span></a>
| <a class=”style40″ href=”WorkInterests.html”><span class=”style32″>Work
Interests</span></a> | <a class=”style40″ href=”CoursesTaken.html”>
<span class=”style32″>Courses Taken</span></a> | </span>
<span class=”style51″> Contact Me</span></p>
<p class=”style6″ style=”height: 34px; margin-top: 0px”>
</p>
<p class=”style53″ style=”height: 34px; margin-top: 0px”>
Contact Me</p>
<table style=”width: 100%”>
<tr>
<td class=”style5″>
<form action=”AddContact.php” method=”get” name=”MainForm”>
<span class=”style54″>* Indicates a required field</span><br />
<table style=”width: 100%”>
<tr>
<td class=”style52″ style=”width: 504px”>*First Name</td>
<td class=”style2″><input name=”FirstNameTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>*Last Name</td>
<td class=”style2″><input name=”LastNameTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>*Phone Number</td>
<td class=”style2″><input name=”PhoneNumberTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>*Email Address</td>
<td class=”style2″><input name=”EmailAddressTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>Address</td>
<td class=”style2″><input name=”AddressTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>City</td>
<td class=”style2″><input name=”CityTextBox” type=”text” /></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>*State</td>
<td class=”style2″>
<select name=”StateDropDownBox” style=”width: 73px”>
<option></option>
<option>NJ</option>
<option>NY</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td class=”style52″ style=”width: 504px”>Zip</td>
<td class=”style2″>
<input name=”ZipTextBox” type=”text” style=”width: 74px” /></td>
</tr>
</table>
<input name=”SubmitButton” type=”submit” value=”Submit” /><br />
<br />
<br />
<br />
</form>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<p>
<span class=”style32″><span class=”style37″>
</span></span></p>
<p> </p>
<p> </p>
<p> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″> </p>
<p class=”style5″><span class=”style32″><span class=”style37″>Privacy Policy | Terms of Use | Contact Me</span><br class=”style37″ />
<span class=”style37″> Website Designed and Developed by Jonathan Palmieri</span><br class=”style37″ />
<br class=”style37″ />
<span class=”style37″> Copyright © 2010</span></span></p>
</div>
</body>
</html></body>
</html>