Contact Form Help

WebProgrammerNewb22 · November 15, 2010

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.

<!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>

Pikachu2000 · November 15, 2010

Javascript cannot be relied on for form validation. You still need to validate the form server-side.

WebProgrammerNewb22 · November 15, 2010

what your referring to is where I put the form action?? I'm sorry I am very new to this and am trying to understand how to best switch it to Java.

Pikachu2000 · November 15, 2010

Can you explain better what you're trying to do? It sounds like you want to validate the form using javascript, and eliminate using a php script for error-checking. Is that correct, or am I misunderstanding what you're asking?

WebProgrammerNewb22 · November 15, 2010

That is correct. I am trying to use JavaScript to show my error messages and pop up boxes. To do this do I put the Java code right in my HTML page like I did above?? When I put the form I have to put an action, so I just made another page with the same code to make sure it was using it.

Pikachu2000 · November 15, 2010

You really don't want to eliminate the php script for form validation. You need to have a php script validate the form data also because I can simply disable javascript in my browser and send any value I want through your form. Using javascript is fine, but it can't be viewed as anything more than a convenience for the user, and if done improperly, it can actually become a huge inconvenience.

As far as whether the javascript you have above is correct, I'll have to let someone else answer that question. I'm far from an expert when it comes to actually writing JS.

WebProgrammerNewb22 · November 15, 2010

OK great thanks for your help. I still think I want to use JavaScript only because that is the method that my professor prefers. This is for a class, but I also use this website for personal use for resume's and such. Does anyone know why my java is not working??

worldcom · November 15, 2010

In your <FORM> tag, you are not calling the javascript.

Use onsubmit="yourjavascriptfunction()"

and you really do need php vailidated regardless of what your processor says

Sign In

Contact Form Help

Recommended Posts

WebProgrammerNewb22

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

WebProgrammerNewb22

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

WebProgrammerNewb22

Link to comment

Share on other sites

Pikachu2000

Link to comment

Share on other sites

WebProgrammerNewb22

Link to comment

Share on other sites

worldcom

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information