www.webdeveloper.com
Results 1 to 13 of 13

Thread: Javascript form help needed

  1. #1
    Join Date
    Mar 2009
    Posts
    7

    Javascript form help needed

    Hi I'm trying to figure out how old a user is and how many hrs are spent playing video games a day to show how many yrs were spent playing video games. The formula would be years(hoursvideogames*age)divided by 24. I've done this before but not with the radio buttons and drop down list. How would I calculate this with the getelementbyID() method. So when they click submit it should write their name and how many years have been spend on the computer. I know I dont have any of the calculations, I didnt want to post them since they're way off, could someone show me how to get started? I am going to put more age options but didn't want to post all of them since it makes the code look massive.
    <html>
    <head>
    <script type='text/javascript'>
    function check(browser)
    {
    document.getElementById("answer").value=browser;
    }
    <div>
    function formValidator(){
    // Make quick references to our fields
    var firstname = document.getElementById('firstname');
    var myAge = document.getElementById('age');

    if(isAlphabet(firstname, "Please enter only letters for your name")){
    }
    return false;

    }
    </script>
    </head>
    <body>
    <form onsubmit='return formValidator()' >
    First Name: <input type='text' id='firstname' /><br />
    Age: <select id='age'>
    <option>Please Choose</option>
    <OPTION VALUE="0">--
    <OPTION VALUE="1">1
    <OPTION VALUE="2">2
    <OPTION VALUE="3">3
    <OPTION VALUE="4">4
    <OPTION VALUE="5">5
    <OPTION VALUE="6">6
    <OPTION VALUE="7">7
    <OPTION VALUE="8">8
    <OPTION VALUE="9">9
    <OPTION VALUE="10">10
    <OPTION VALUE="11">11
    <OPTION VALUE="12">12
    <OPTION VALUE="13">13
    <OPTION VALUE="14">14
    <OPTION VALUE="15">15
    <OPTION VALUE="16">16
    <OPTION VALUE="17">17



    </select><br />
    <br />How many times:<br />
    <input type="radio" name="browser" onclick="check(this.value)" value="2">2<br />
    <input type="radio" name="browser" onclick="check(this.value)" value="3">3<br />
    <input type="radio" name="browser" onclick="check(this.value)" value="4">4<br />
    <br />

    </div>

    <input type='submit' value='Hours spend playing video games?' />

    </form>


    </form>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Write to where?

  3. #3
    Join Date
    Mar 2009
    Posts
    7
    Sorry I meant display it on the same page when the user clicks "submit", so maybe document.write would work.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    document.write will write a new document.

    Code:
    var content=document.createElement('p');
    content.appendChild(document.createTextNode("Text goes here"));
    document.body.appendChild(content);

  5. #5
    Join Date
    Mar 2009
    Posts
    7
    okay, so how would I start it to do the calculations?

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    That just writes the data to the end of your document.
    You still have to write the function to do the calculation.

  7. #7
    Join Date
    Mar 2009
    Posts
    7
    that's mainly what I needed help with, can you assist or maybe show me an example?
    Thanks

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Looks like homework so you will have to give it a try yourself first.
    http://www.quirksmode.org/js/forms.html

  9. #9
    Join Date
    Mar 2009
    Posts
    7

    JavaScript calculation form help needed

    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: Oh and this is not related to hw as others have stated.

    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>

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    var hrs=(form.hrs[0].checked)? form.hrs[0].value : form.hrs[1].value; //Ternary statement
    var calc=(hrs*form.yrs.value)/12;
    alert(calc+" Thanks, "+form.fullname.value+" for completing the form correctly.");

  11. #11
    Join Date
    Mar 2009
    Posts
    7
    that all I need to add? the only thing is it doesnt give me the answer to my calculation in the alert box, instead of sending it, i want the alert box to say their name and yrs spent playing video games

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You should be able to deduce the changes required for the alert.

  13. #13
    Join Date
    Mar 2009
    Posts
    7
    Thanks I got everything to work , im changing the alert box to display text at the bottom of the document but you showed me how to do that above

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles