Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help needed with calculations for forms

    Hi I cannot figure out how to code a calculation for a single form. I want the user to select their age through the drop down list and the hours spent playing video games with the radio button. I then want it to display in text how many yrs of their life is spent playing video games. So it'd take (hrs*age)/12 until i can get the correct formula. How would I do this? So far I just have the basics of the drop down menu and radio button filled out. I plan on putting more options for how old the person is but just want someone to give me an example on how I could do the "if" and "else" statements and call the calculations, I prefer to use the getElementbyId() method:

    sorry i left a chunk out
    <HTML>
    <HEAD>
    <TITLE> time </TITLE>

    <script language="javascript">
    <!--
    function validate (form){

    form.fullname.value = form.fullname.value.replace(/[^a-zA-Z-/']/g,"");
    if (!form.fullname.value) {
    alert("Please reenter your FULL NAME.");
    return false;
    }

    if (!form.hrs[0].checked && !form.hrs[1].checked) {
    alert("Please select a GENDER.");
    return false;
    }

    if (!form.yrs.value) {
    alert("How old are you?");
    return false;
    }

    alert("Thanks for completing the form correctly.");
    return true;
    }
    //-->
    </script>


    </HEAD>
    <BODY>
    <FORM METHOD="post" name="module102form" onSubmit="return validate(this)";
    <!-- START HTML -->
    <TABLE>
    <TR>
    <TH ALIGN="Left" COLSPAN="2"><H1> <U>HOURS SPENT PLAYING VIDEO GAMES</U></H1></TH>
    </TR>
    <TR>
    <TD><B> FULL NAME: </B></TD>
    <TD width="608"><INPUT NAME="fullname" TYPE="text"> (letters only) </TD>
    </TR>
    <TR>
    <TD><B> HOURS A DAY: </B> </TD>
    <TD><B><INPUT TYPE="radio" NAME="hrs" VALUE="2">2</B>
    <B><INPUT TYPE="radio" NAME="hrs" VALUE="3" >3</B></TD>
    </TR>
    <TR>
    <TD><B> how old are you?: </B></TD>
    <TD><SELECT NAME="yrs">
    <OPTION VALUE="" SELECTED> How old are you </option>
    <OPTION VALUE="18">18 </option>
    <OPTION VALUE="19"> 19 </option>
    <OPTION VALUE="20"> 20 </option>
    </SELECT>
    </TD>
    </TR>
    <!-- BUTTON -->
    <tr>
    <td colspan="2"><INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"></td>
    </tr>
    </TABLE>
    </FORM>
    </BODY>
    </HTML>
    Last edited by zoe09; 03-13-2009 at 03:30 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    You seem to be making rather heavy weather of this, and you cannot expect other people to do your assignments for you. As you have not given id's to any element you cannot use the document.getElementById() method.

    To capture the radio button value:

    Code:
    var h = document.module102form.hrs;
    for (var i = 0; i<h.length; i++) {
    if (h[i].checked) {
    var a = h[i].value;
    }
    }
    and the select list value:

    Code:
    var y = document.module102form.yrs.value;
    I have nothing but confidence in you. And very little of that.
    Groucho Marx (1890 - 1977)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's not an assignment, it's for my webpage

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was able to research and find more to solve the problem but its still not working, any suggestions?
    <HTML>
    <HEAD>
    <TITLE> time </TITLE>

    <script language="javascript">
    <!--
    var hrs=(form.hrs[0].checked)? form.hrs[0].value : form.hrs[1].value;
    var calc=(hrs*form.yrs.value)/12;
    alert(calc+" Thanks, "+form.fullname.value+" for completing the form correctly.");
    function validate (form){

    form.fullname.value = form.fullname.value.replace(/[^a-zA-Z-/']/g,"");
    if (!form.fullname.value) {
    alert("Please reenter your FULL NAME.");
    return false;
    }

    if (!form.hrs[0].checked && !form.hrs[1].checked) {
    alert("Please select a GENDER.");
    return false;
    }

    if (!form.yrs.value) {
    alert("How old are you?");
    return false;
    }

    alert("Thanks for completing the form correctly.");
    return true;
    }
    //-->
    </script>


    </HEAD>
    <BODY>
    <FORM METHOD="post" name="module102form" onSubmit="return validate(this)";
    <!-- START HTML -->
    <TABLE>
    <TR>
    <TH ALIGN="Left" COLSPAN="2"><H1> <U>HOURS SPENT PLAYING VIDEO GAMES</U></H1></TH>
    </TR>
    <TR>
    <TD><B> FULL NAME: </B></TD>
    <TD width="608"><INPUT NAME="fullname" TYPE="text"> (letters only) </TD>
    </TR>
    <TR>
    <TD><B> HOURS A DAY: </B> </TD>
    <TD><B><INPUT TYPE="radio" NAME="hrs" VALUE="2">2</B>
    <B><INPUT TYPE="radio" NAME="hrs" VALUE="3" >3</B></TD>
    </TR>
    <TR>
    <TD><B> how old are you?: </B></TD>
    <TD><SELECT NAME="yrs">
    <OPTION VALUE="" SELECTED> How old are you </option>
    <OPTION VALUE="18">18 </option>
    <OPTION VALUE="19"> 19 </option>
    <OPTION VALUE="20"> 20 </option>
    </SELECT>
    </TD>
    </TR>
    <!-- BUTTON -->
    <tr>
    <td colspan="2"><INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"></td>
    </tr>
    </TABLE>
    </FORM>
    </BODY>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quite a few errors still, but this now works enough for you to trace the problems and correct them.


    Code:
    <script language="javascript">
    function validate (form) {  // must be here
    var hrs=(form.hrs[0].checked)? form.hrs[0].value : form.hrs[1].value; 
    
    // this will default to 3 if nothing selected.
    
    var calc=(hrs*form.yrs.value)/12;
    alert(calc+ " Thanks, "+form.fullname.value+" for completing the form correctly.");
    
    //Why display the variable calc here?
    <script language="javascript"> is deprecated and obsolete. Use <script type = "text/javascript"> instead.

    form name = "module102form" sounded like something out of a student's text book.

    if (!form.hrs[0].checked && !form.hrs[1].checked) {
    alert("Please select a GENDER.");
    return false;
    }

    There is no input for gender.
    Last edited by Philip M; 03-13-2009 at 05:35 PM.

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay I changed the form name, i was practicing out of a JavaScript tutorial, so i added the stuff in and took out the gender since i just want to know age and hrs spent, but when i submit my answer it only states my name, i wanted it to display the answer to the calculation in yrs, how would I do that? do i still have alot of errors?

    <HTML>
    <HEAD>
    <TITLE> time </TITLE>

    <script type = "text/javascript">
    <!--

    function validate (form){
    var hrs=(form.hrs[0].checked)? form.hrs[0].value : form.hrs[1].value;

    var calc=(hrs*form.yrs.value)/12;
    alert(calc+ " Thanks, "+form.fullname.value+" for completing the form correctly.");


    form.fullname.value = form.fullname.value.replace(/[^a-zA-Z-/']/g,"");
    if (!form.fullname.value) {
    alert("Please reenter your FULL NAME.");
    return false;
    }

    if (!form.hrs[0].checked && !form.hrs[1].checked) {
    alert("age please
    return false;
    }

    if (!form.yrs.value) {
    alert("How old are you?");
    return false;
    }

    alert("Thanks for completing the form correctly.");
    return true;
    }
    //-->
    </script>


    </HEAD>
    <BODY>
    <FORM METHOD="post" name="form1" onSubmit="return validate(this)";
    <!-- START HTML -->
    <TABLE>
    <TR>
    <TH ALIGN="Left" COLSPAN="2"><H1> <U>HOURS SPENT PLAYING VIDEO GAMES</U></H1></TH>
    </TR>
    <TR>
    <TD><B> FULL NAME: </B></TD>
    <TD width="608"><INPUT NAME="fullname" TYPE="text"> (letters only) </TD>
    </TR>
    <TR>
    <TD><B> HOURS A DAY: </B> </TD>
    <TD><B><INPUT TYPE="radio" NAME="hrs" VALUE="2">2</B>
    <B><INPUT TYPE="radio" NAME="hrs" VALUE="3" >3</B></TD>
    </TR>
    <TR>
    <TD><B> how old are you?: </B></TD>
    <TD><SELECT NAME="yrs">
    <OPTION VALUE="" SELECTED> How old are you </option>
    <OPTION VALUE="18">18 </option>
    <OPTION VALUE="19"> 19 </option>
    <OPTION VALUE="20"> 20 </option>
    </SELECT>
    </TD>
    </TR>
    <!-- BUTTON -->
    <tr>
    <td colspan="2"><INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"></td>
    </tr>
    </TABLE>
    </FORM>
    </BODY>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    This will move you forward but please try not to post code with obvious errors:
    alert("age please
    Still needs a fair amount of tidying up.


    Code:
    <script type = "text/javascript"> 
    
    function validate (form){
    var hrs=(form.hrs[0].checked)? form.hrs[0].value : form.hrs[1].value;  // will default to 3
    
    var flname = form.fullname.value;
    flname  = flname.replace(/[^a-zA-Z\s-/']/g,"");  // full name will include a space
    if (flname.length < 5) {  // full name fewer than 5 characters Al Doe
    alert ("Please re-enter your FULL NAME.");
    return false;
    }
    
    var age = document.form1.yrs.value;
    if (age == 0) {  // nothing selected
    alert ("Please select your age")
    return false;
    }
    
    var calc=((hrs*form.yrs.value)/12).toFixed(2);
    alert ("You spend " + calc  +" years playing silly computer games")
    
    alert("Thanks " + flname + " for completing the form correctly.");
    return true;  // return true is the default so this line is not required
    }
    </script>
    <OPTION VALUE="0" SELECTED> How old are you </option>

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay it works great now thanks, i'm adding more ages but i'll just follow what has been done so far


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •