Validating textboxes and checkboxes then add the values of those checkboxes
- by TiTi Nguyen
I am very new to Javascript. I am running to a problem and don't know how to solve it. Could you please help?
Basically, I want to create some textboxes and checkboxes in a form. Then I have to validate those fields, and add the values of the checkboxes if they are selected. One of the textboxes asking for how many semesters attended, and 3 checkboxes with value of 100, 1000, and 750. Whichever checkbox is selected, it should multiply its value to the number of semesters attended. For example if the first two checkboxes are selected then totalCost = (100+1000)* semester.
Here is my code:
User Name:
<label>User Address:
<input type = "text" id ="address" size = "30"/></label>
<br/><br/>
<label> User E-mail address:
<input type = "text" id ="email" size = "30"/></label>
<br/><br/>
<label> User Phone number:
<input type = "text" id ="phone" size = "30"/></label>
<br/><br/>
<label> User area code:
<input type = "text" id ="area" size = "30"/></label>
<br/><br/>
<label> User SSN:
<input type = "text" id ="ssn" size = "30"/></label>
<br/><br/>
<label> User Birthday:
<input type = "text" id ="birthday" size = "30"/></label>
<br/><br/>
<label> Number of semester attended:
<input type = "text" id ="semester" size = "3"/></label>
<br/><br/>
<label><input type="checkbox" id="box_book" value="100"/>Books $100 per
semester</label>
<br/>
<label><input type="checkbox" id="box_tuition" value="1000"/>Tuition $1000
per semester</label>
<br/>
<label><input type="checkbox" id="box_room" value="750"/>Room and Board
$750 per semester</label>
<br/>
<input type="reset" id="reset"/>
<input type="submit" id="submit" onclick="checking()"/>
<p/>
</form>
function checking()
{
var name=document.forms["myForm"]["name"].value;
var address=document.forms["myForm"]["address"].value;
var email=document.forms["myForm"]["email"].value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
var phone=document.forms["myForm"]["phone"].value;
var area=document.forms["myForm"]["area"].value;
var ssn=document.forms["myForm"]["ssn"].value;
var birth=document.forms["myForm"]["birthday"].value;
var semester=document.forms["myForm"]["semester"].value;
var boxBook = document.forms["myForm"]["box_book"].value;
var boxTuition = document.forms["myForm"]["box_tuition"].value;
var boxRoom = document.forms["myForm"]["box_room"].value;
if (name==null || name=="")
{
alert("Please fill in your name.");
return false;
}
if (address==null || address=="")
{
alert("Please fill in your address.");
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("The email (" + email + ") is not a valid e-mail address. Please
reenter your email address.");
return false;
}
if(phone.length!=10)
{
alert("Phone number entered in incorrect form. Please reenter phone number in the
correct form which contains 10
numbers.");
return false;
}
if (area==null || area=="")
{
alert("Please fill in the area code");
return false;
}
if(ssn.length!=9)
{
alert("SSN entered in incorrect form. Please reenter SSN.");
return false;
}
if (birth==null || birth=="")
{
alert("Please fill in your date of birth.");
return false;
}
if (semester==null || semester=="")
{
alert("How many semester have you attended?");
return false;
}
if (document.getElementById("box_book").checked == false &&
document.getElementById("box_tuition").checked == false
&& document.getElementById("box_room").checked == false)
{
alert("You must select one of the checkboxes");
return false;
}
if (document.getElementById("box_book").checked ==true)
{
var subcost = boxBook;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_book").checked == true &&
document.getElementById("box_tuition").checked == true)
{
var subcost = boxBook + boxTuition;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_book").checked == true &&
document.getElementById("box_tuition").checked == true
&& document.getElementById("box_room").checked == true)
{
var subcost = boxBook + boxTuition + boxRoom;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_tuition").checked ==true)
{
var subcost = boxTuition;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_tuition").checked == true &&
document.getElementById("box_room").checked == true)
{
var subcost = boxTuition + boxRoom;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_room").checked ==true)
{
var subcost = boxRoom;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
if (document.getElementById("box_book").checked == true &&
document.getElementById("box_room").checked == true)
{
var subcost = boxBook + boxRoom;
var totalcost = subcost * semester;
alert ("Your total cost is: $" + totalcost);
}
else
return false;
}
When I hit the submit button, nothing happens!! Please help.
