antatiana
asked on
challenge with javascript
I have challenge why this script don't work in site page, but solitary work. I have attached code.
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Created on: 9/19/2011 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<title></title>
<script language="JavaScript" type="text/javascript">
// Javascript validation functions
// http://www.designplace.org/
//function to check empty fields
function isEmpty(strfield1, strfield2, strfield3) {
//change "field1, field2 and field3" to your field names
strfield1 = document.forms[0].field1.value
strfield2 = document.forms[0].field2.value
strfield3 = document.forms[0].field3.value
//name field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"Name:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//url field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"Surname:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//title field
if (strfield3 == "" || strfield3 == null || strfield3.charAt(0) == ' ')
{
alert("\"Message for Company:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form){
if (isEmpty(form.field1)){
if (isEmpty(form.field2)){
if (isEmpty(form.field3)){
if (isValidEmail(form.email)){
alert("Form is accepted");
return true;
}
}
}
}
return false;
}
</script>
</head>
<body>
<table width=80% height=80 border="0" align="center" summary="">
<thead>
<tr>
<td colspan="2" align="center">
<img src="images/logo.png" border="0" alt="Company Logo" width=60% />
</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2" align="right">Copyright Access Technologies Limited 2011</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="menulist" width=15% valign="top">
<h3 class="menulist">Main Menu</h3>
<ul class="menulist">
<li class="menulist"><a class="menulist" href="home.html">Home</a> </li>
<li class="menulist"><a class="menulist" href="services.html">Services</a> </li>
<li class="menulist"><a class="menulist" href="products.html">Products</a> </li>
<li class="menulist"><a class="menulist" href="articles.html">Articles</a> </li>
<li class="menulist"><a class="menulist" href="forum.html">Forum</a> </li>
<li class="menulist"><a class="menulist" href="faq.html">FAQ</a> </li>
<li class="menulist"><a class="menulist" href="feedback.html">Customer Feedback</a> </li>
<li class="menulist"><a class="menulist" href="home.html">About Us</a> </li>
</ul>
<br />
<table width=80%>
<tr>
<th colspan="2" align="left">
<h3 class="menulist">Login</h3>
</th>
</tr>
<tr>
<td align="right">
<form name="login" action="validate.asp" method="get">
Username:
</td>
<td>
<input type="text" name="username" size="15" maxlength="15"/>
</td>
</tr>
<tr>
<td align="right">
Password:
</td>
<td>
<input type="text" name="password" size="15" maxlength="15"/>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="Submit" />
</td>
<td>
</td>
</form>
</tr>
<tr>
<td colspan="2"><br /><a class="menulist" href="register.html"><h3>Register Now</h3></a>
</tr>
</table>
<br />
</td>
<td>
<h1>Feedback Form</h1>
<p>
To contact us or leave your feedback about our services please fill this form
</p>
<form name="theform" method="post" action="#" onSubmit="return check(this);">
<p>
<input type="hidden" name="recipient"
value="accesstechnologies@gmail.com"/>
<input type="hidden" name= "subject"
value="Feedback Form"/>
<input type ="hidden" name ="redirect"
value= "main.html"/>
</p>
<p>
<label> Name:
<input name="field1" type="text" />
<label/>
<p/>
<p>
<label>Surname:
<input name="field2" type="text" />
<label/>
<p/>
<p>
<label>
E-Mail Address:
<input name="email" type="text" id="email" />
<label/>
<p/>
<p>
<label> Subject for contact:
<select name = "subject">
<option selected ="selected">Please Select</option>
<option>General enquiry</option>
<option>Buying product issues</option>
<option>Service information</option>
<option>Partnership interest</option>
<option>Other</option>
</select>
</label>
</p>
<p>
<strong>Your interest in web accessibility: </strong></br>
<label>Have accessibility issues yourself
<input name ="interest" type ="checkbox"
value="accessibility"/>
</label>
<label>Site development
<input name="interest" type="checkbox"
value="development"/>
</label>
<label>Commercial interest
<input name="interest" type="checkbox"
value="commercial"/>
</label>
<label>Other
<input name="interest" type="checkbox"
value="other"/>
</label>
</p>
Message for Company:<br/>
<textarea name ="field3" type="text" id="field3"rows = "6" cols="52"></textarea>
<br/>
<input name="submit" type="submit" />
</form>
</td>
<!--END OF CONTENT -->
</tr>
</tbody>
</table>
</body>
</html>
user_n
Can you explain better?
yes please elaborate what is not functioning :)
ASKER
when you check this page through editor, javascript will not work here. but if take this code separately it will work. I attached javascipt from this page to see that it works separately.
Compare two these pages in editor.
Compare two these pages in editor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex,follow" />
<script language="JavaScript" type="text/javascript">
// Javascript validation functions
// http://www.designplace.org/
//function to check empty fields
function isEmpty(strfield1, strfield2, strfield3) {
//change "field1, field2 and field3" to your field names
strfield1 = document.forms[0].field1.value
strfield2 = document.forms[0].field2.value
strfield3 = document.forms[0].field3.value
//name field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"Name:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//url field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"Surname:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//title field
if (strfield3 == "" || strfield3 == null || strfield3.charAt(0) == ' ')
{
alert("\"Message for Company:\" is a mandatory field.\nPlease amend and retry.")
return false;
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form){
if (isEmpty(form.field1)){
if (isEmpty(form.field2)){
if (isEmpty(form.field3)){
if (isValidEmail(form.email)){
alert("Form is accepted");
return true;
}
}
}
}
return false;
}
</script>
</head>
<h1>Feedback Form</h1>
<p>
To contact us or leave your feedback about our services please fill this form
</p>
<form name="theform" method="post" action="#" onSubmit="return check(this);">
<p>
<input type="hidden" name="recipient"
value="accesstechnologies@gmail.com"/>
<input type="hidden" name= "subject"
value="Feedback Form"/>
<input type ="hidden" name ="redirect"
value= "main.html"/>
</p>
<p>
<label> Name:
<input name="field1" type="text" />
<label/>
<p/>
<p>
<label>Surname:
<input name="field2" type="text" />
<label/>
<p/>
<p>
<label>
E-Mail Address:
<input name="email" type="text" id="email" />
<label/>
<p/>
<p>
<label> Subject for contact:
<select name = "subject">
<option selected ="selected">Please Select</option>
<option>General enquiry</option>
<option>Buying product issues</option>
<option>Service information</option>
<option>Partnership interest</option>
<option>Other</option>
</select>
</label>
</p>
<p>
<strong>Your interest in web accessibility: </strong></br>
<label>Have accessibility issues yourself
<input name ="interest" type ="checkbox"
value="accessibility"/>
</label>
<label>Site development
<input name="interest" type="checkbox"
value="development"/>
</label>
<label>Commercial interest
<input name="interest" type="checkbox"
value="commercial"/>
</label>
<label>Other
<input name="interest" type="checkbox"
value="other"/>
</label>
</p>
Message for Company:<br/>
<textarea name ="field3" type="text" id="field3"rows = "6" cols="52"></textarea>
<br/>
<input name="submit" type="submit" />
</form>
</body>
</html>ASKER
here is javascript that validate e-mail and entry forms. At first code page it don't work and in second one works.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You only allow empty fields. Change the test to return false if a field is empty and return true if all the fields passed the tests
Ps: NEVER call something name="submit" if you ever plan to submit the form from script
ASKER
Thank you for your help in rising my mistake.