...

View Full Version : help needed with calculations for forms



zoe09
03-13-2009, 03:14 AM
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>

Philip M
03-13-2009, 09:41 AM
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:


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:


var y = document.module102form.yrs.value;

I have nothing but confidence in you. And very little of that.
Groucho Marx (1890 - 1977)

zoe09
03-13-2009, 04:22 PM
it's not an assignment, it's for my webpage

zoe09
03-13-2009, 05:00 PM
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>

Philip M
03-13-2009, 05:33 PM
Quite a few errors still, but this now works enough for you to trace the problems and correct them.



<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.

zoe09
03-13-2009, 05:46 PM
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>

Philip M
03-13-2009, 06:13 PM
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.



<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>

zoe09
03-13-2009, 06:19 PM
okay it works great now thanks, i'm adding more ages but i'll just follow what has been done so far



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum