Validating textboxes and checkboxes then add the values of those checkboxes

Posted by TiTi Nguyen on Stack Overflow See other posts from Stack Overflow or by TiTi Nguyen
Published on 2013-10-19T21:49:44Z Indexed on 2013/10/19 21:54 UTC
Read the original article Hit count: 316

Filed under:

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.

© Stack Overflow or respective owner

Related posts about JavaScript