/    Sign up×
Community /Pin to ProfileBookmark

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>

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@FangMar 10.2009 — Write to where?
Copy linkTweet thisAlerts:
@zoe09authorMar 10.2009 — Sorry I meant display it on the same page when the user clicks "submit", so maybe document.write would work.
Copy linkTweet thisAlerts:
@FangMar 10.2009 — [I]document.write[/I] will write a new document.

var content=document.createElement('p');
content.appendChild(document.createTextNode("Text goes here"));
document.body.appendChild(content);
Copy linkTweet thisAlerts:
@zoe09authorMar 10.2009 — okay, so how would I start it to do the calculations?
Copy linkTweet thisAlerts:
@FangMar 10.2009 — That just writes the data to the end of your document.

You still have to write the function to do the calculation.
Copy linkTweet thisAlerts:
@zoe09authorMar 10.2009 — that's mainly what I needed help with, can you assist or maybe show me an example?

Thanks
Copy linkTweet thisAlerts:
@FangMar 10.2009 — Looks like homework so you will have to give it a try yourself first.

http://www.quirksmode.org/js/forms.html
Copy linkTweet thisAlerts:
@zoe09authorMar 13.2009 — 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>
Copy linkTweet thisAlerts:
@FangMar 13.2009 — 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.");
Copy linkTweet thisAlerts:
@zoe09authorMar 13.2009 — 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
Copy linkTweet thisAlerts:
@FangMar 13.2009 — You should be able to deduce the changes required for the alert.
Copy linkTweet thisAlerts:
@zoe09authorMar 13.2009 — 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
×

Success!

Help @zoe09 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...