Menu
Hello.
Sorry folks. This is a rather long one. I would be very greatful for [B]any
Here’s the code:
[B]The form:
[CODE]
<html><head><title>MyForm</title>
<script type=”text/javascript” src=”Problem16.js”></script>
<style type=”text/css”>
.formstyle {position: absolute;
left: 260px;
top: 75px;
background-color: darkblue;
padding-top:150px;
padding-bottom:50px;
}
.textstyle {
font-family: Arial;
font-size: 11px;
color: white;
}
#messagestyle {position:absolute;
left: 75px;
top: 15px;
border: solid 2px black;
color: lightblue;
}
</style>
</head>
<body bgColor=”black” onLoad=”attachHandlers();”>
<div class=”formstyle”>
<div id=”message”></div>
<table>
<form action=”mailto:[email protected]” method=”post”>
<tr>
<td>
<label for=”Name” class=”textstyle”>Your Name:
<input type=”text” name=”Name” id=”the_name” size=”20″>
</label>
</td>
</tr>
<tr>
<td>
<label for=”Email” class=”textstyle”>E-mail Address:
<input type=”text” name=”Email” id=”the_email” size=”20″>
</label>
</td>
</tr>
<tr>
<td>
<span class=”textstyle”>Please select a city:</span>
<select name=”city” id=”myselections”>
<option selected=”selected”>(none)</option>
<option value=”Chicago”>Chicago</option>
<option value=”Atlanta”>Atlanta</option>
<option value=”D.C.”>Wash D.C.</option>
<option value=”New York”>Chicago</option>
</select>
</td>
</tr>
<tr>
<td>
<label for=”beauty” class=”textstyle” id=”target1″>Who Do You Like More:
<input type=”radio” name=”beauty” value=”Halle” size=”2″ id=”radiochoice”>Halle Berry
<input type=”radio” name=”beauty” value=”Beyonce Knowles” size=”2″>Beyonce Knowles
<input type=”radio” name=”beauty” value=”Rosario Dawson” size=”2″>Rosario Dawson
<input type=”radio” name=”beauty” value=”Jessica Alba” size=”2″ id=”breakpoint”>Jessica Alba
</label>
</td>
</tr>
<tr>
<td>
<label for=”dish” class=”textstyle”>What’s Your Favorite Dish:<br>
<input type=”checkbox” name=”dish” value=”fish” size=”2″>Fish<br>
<input type=”checkbox” name=”dish” value=”chicken” size=”2″ id=”checkchoice”>Chicken<br>
<input type=”checkbox” name=”dish” value=”sphagetti” size=”2″ id=”mainchkbox”>Sphagetti<br>
<input type=”checkbox” name=”dish” value=”rice” size=”2″>Rice
</label>
</td>
<tr>
<tr>
<td>
<input type=”submit” value=”send form” id=”my_button”>
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
[B]The Script:
[CODE]
<script type=”text/javascript”>
var error = new createerror();
var errors = new Array();
errors[0]=”Namefield has either blank spaces or been left blank. Please fill in.”;
errors[1]=”Emailfield has either blank spaces or been left blank. Please fill in.”;
errors[2]=”Field has illegal characters. Please fill in letters only.”;
errors[3]=”Not a valid email address.”;
errors[4]=”Please select an city.”;
errors[5]=”Please select at least one favorite dish.”;
function createerror(){
this.val=0;
return this;
}
function attachHandlers(){
var the_button = document.getElementById(“my_button”);
the_button.onclick=checkFormFields;
var radio_sel = document.getElementById(“radiochoice”);
radio_sel.onclick=addRadioOpts;
var chkbox_sel = document.getElementById(“checkchoice”);
chkbox_sel.onclick=addCheckOpts;
}
function addRadioOpts(){
var newrow = document.createElement(“tr”);
var newcell1 = document.createElement(“td”);
var newcell2 = document.createElement(“td”);
var newInput1 = document.createElement(“input”);
newInput1.setAttribute(“type”, “radio”);
newInput1.setAttribute(“name”, “movie”);
newInput1.setAttribute(“size”, “2”);
newInput1.setAttribute(“class”, “textstyle”);
var nameText1 = document.createTextNode(“Swordfish”);
var newInput2 = document.createElement(“input”);
newInput2.setAttribute(“type”, “radio”);
newInput2.setAttribute(“name”, “movie”);
newInput2.setAttribute(“size”, “2”);
newInput2.setAttribute(“class”, “textstyle”);
var nameText2 = document.createTextNode(“Perfect Stranger”);
newInput1.appendChild(nameText1);
newInput2.appendChild(nameText2);
newInput1.appendChild(newInput2);
newcell2.appendChild(newInput1);
newcell1.appendChild(newcell2);
newrow.appendChild(newcell1);
var the_table = document.getElementsByTagName(“table”)[0];
var the_label = document.getElementById(“target1”);
var my_row = the_label.parentNode.parentNode;
the_table.insertBefore(newrow, my_row);
var radio_opts = document.getElementsByTagName(“input”);
for (var i=0; i < radio_opts.length; i++)
{
if (radio_opts[i].nodeName.toLowerCase()==”input”)
{
if (radio_opts[i].name=”beauty”)
{
radio_opts[i].onChange=function(){the_table.removeChild(newrow);}
}
}
}
}
function addCheckOpts(){
var newInput3 = document.createElement(“input”);
newInput3.setAttribute(“type”, “radio”);
newInput3.setAttribute(“name”, “choice”);
newInput3.setAttribute(“size”, “2”);
newInput3.setAttribute(“class”, “textstyle”);
var nameText3 = document.createTextNode(“chicken’n’pasta”);
var newInput4 = document.createElement(“input”);
newInput4.setAttribute(“type”, “radio”);
newInput4.setAttribute(“name”, “choice”);
newInput4.setAttribute(“size”, “2”);
newInput4.setAttribute(“class”, “textstyle”);
var nameText4 = document.createTextNode(“chicken’n’potatoes”);
newInput3.appendChild(nameText3);
newInput4.appendChild(nameText4);
newInput3.appendChild(newInput4);
var my_table = document.getElementsByTagName(“table”)[0];
var the_box = document.getElementById(“mainchkbox”);
my_table.insertBefore(newInput3, the_box);
var chicken_sel = document.getElementById(“checkchoice”);
chicken_sel.onchange=function(){my_table.removeChild(newInput3);}
}
function checkFormFields()
{
var first_field = document.getElementById(“the_name”);
var sec_field = document.getElementById(“the_email”);
var the_sel = document.getElementById(“myselections”);
var sel_opt = the_sel.options[selectedIndex];
var my_inputs = document.getElementsByTagName(“input”);
for (var i=0; i < my_inputs.length; i++)
{
if (my_inputs[i].nodeName.toLowerCase==”input”)
{
if (my_inputs[i].name==”beauty”)
{
var radio_boxes = my_inputs[i];
}
if (my_inputs[i].name==”dish”)
{
var chk_boxes = my_inputs[i];
}
}
}
var correct;
var error_mes=””;
correct=checkBlank(first_field.value, error);
if (!correct)
{
error_mes += errors[error.val] n;
first_field.focus();
return false;
}
correct=checkEmailBlank(sec_field.value, error);
if (!correct)
{
error_mes += errors[error.val] n;
sec_field.focus();
return false;
}
correct=checkValidEmail(sec_field.value, error);
if (!correct)
{
error_mes += errors[error.val] n;
sec_field.focus();
return false;
}
correct=checkIllegalChars(first_field.value, error);
if (!correct)
{
error_mes += errors[error.val] n;
first_field.focus();
return false;
}
correct=checkSelOpts(sel_opts, error);
if (!correct)
{
error_mes += errors[error.val] n;
sel_opts.focus();
return false;
}
correct=checkCheckedOpts(chk_boxes, error);
if (!correct)
{
error_mes += errors[error.val] n;
first_field.focus();
return false;
}
displayErrors(error_mes);
return true;
}
function checkBlank(the_name, error){
if (the_name.length==0)
{
error.val=0;
return false;
}
for(var i=0; i < the_name.length; i++){
if (the_name.charAt(i)!=”” && the_name.charAt(i)!=”t”){
return true;
}
}
error.val=0;
return false;
}
function checkEmailBlank(the_email, error){
if (the_email.length==0)
{
error.val=1;
return false;
}
for(var i=0; i < the_email.length; i++){
if (the_email.charAt(i)!=”” && the_email.charAt(i)!=”t”){
return true;
}
}
error.val=1;
return false;
}
function checkValidEmail(user_email, error){
var my_regexp = /^[w.-]+@([w-]+.)+[a-zA-Z]+$/;
if (!my_regexp.test(the_email))
{
error.val=3;
return false;
}
return true;
}
function checkIllegalChars(theuser_name, error){
var name_exp = /[a-zA-Z]+/;
for(var i=0; i < theuser_name.length; i++)
{
var the_char = theuser_name.charAt(i);
if (!name_exp.text(the_char))
{
error.val=2;
return false;
}
return true;
}
function checkSelOpts(city_opts, error){
if (city_opts!= -1 && city_opts.value !=”none”)
{
return true;
}
error.val=4;
return false;
}
function checkCheckedOpts(check_boxes, error){
for(var i=0; i < check_boxes.length; i++)
{
var ones_chkd = check_boxes[i].checked;
if(!ones_chkd)
{
error.val=5;
return false;
}
}
return true;
}
function displayErrors(the_errors){
var the_field=document.getElementById(“message”);
var the_fieldId = the_field.getAttribute(“id”);
the_field.replace(the_fieldId, “messagestyle”);
the_field.appendChild(the_errors);
}
</script>
Once again, any help or advice is appreciated. I’m new to JavaScript and this is my longest script thus far.