getting radio buttons and check boxes to work in a form

[mick463]

Hi i am very new to HTML and java and i am having trouble getting radio buttons , check boxes and pull down lists to work in my form whenever i put them in there they just come up as undefined. And if i try to put any if statements in the hyper links stop working as the program cannot run. Obviously as i am doing something very wrong.
I am at a loss and have spent hours on it and just cant get these things working.Any thing with a typed answer works great such as first name or last name here is the code i have written so far

<script>
function hidediv(divname) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById(divname).style.visibility = 'hidden'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.divname.visibility = 'hidden'; 
} 
else { // IE 4 
document.all.divname.style.visibility = 'hidden'; 
} 
} 
}

function showdiv(divname) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById(divname).style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.divname.visibility = 'visible'; 
} 
else { // IE 4 
document.all.divname.style.visibility = 'visible'; 

}
} 
}

function page2(){
hidediv("page1");
showdiv("page2");
}

function page3(){
hidediv("page2");
showdiv("page3");
}

function page4(){
hidediv("page3");
showdiv("page4");


OutputPage="First name: " + document.form1.firstname.value;
OutputPage+="<br>Second Name: " + document.form1.Second.value;
OutputPage+="<br>Lastname: " + document.form1.Lastname.value;
OutputPage+="<br>Date of birth: " + document.form1.birth.value;
OutputPage+="<br>Age: " + document.form1.age.value;
OutputPage+="<br>SEX: " + document.form1.sex.value;   //here is problem


OutputPage+="<br>Favorite Color: " + document.form2.favcolor.value;


OutputPage+="<br>Favorite Color: " + document.form3.favcolor.value;

document.getElementById('page4').innerHTML=OutputPage;
}
</script>

<style>
div {
position: absolute;
top: 10px;
}
</style>

<div id="page1">
<form name="form1"><br>
First Name <input type="text" name="firstname" value="Bah"><br>
Second Name <input type="text" name="Second"><br>
Lastname <input type="text" name="Lastname"><br>
Date of birth<input type="text" name="birth"><br>
Age<input type="text" name="age"><br>
<tr>
<td>SEX</td><br><t>                                             //and here is problem
<td><input type="radio" name="sex" value="Male" />Male<br />
<input type="radio" name="sex" value="Female" />Female<br />
</td></tr>


<a href="javascript:page2();">Next Page</a>
</form>
</div>

<div id="page2" style="visibility: hidden">
<form name="form2">
Favorite Color: <input type="text" name="favcolor"><br>


<a href="javascript:page3();">Finish</a>
</form>
</div>

<div id="page3" style="visibility: hidden">

Favorite Color: <input type="text" name="favcolor"><br> 

<a href="javascript:page4();">next</a>
</form></div>

<div id="page4" style="visibility: hidden">
Inner HTML
<input type="submit" value="Submit" />
</div>

The Problem i am having is with the section

<td>SEX</td><br><t>
<td><input type="radio" name="sex" value="Male" />Male<br />
<input type="radio" name="sex" value="Female" />Female<br />
</td></tr>

And the java bit to make it work
OutputPage+="<br>SEX: " + document.form1.sex.value;


Any tuition would be greatly appreciated thank you

[Philip M]

i am very new to HTML and java...

This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

You cannot carry values over from one page to another like that.
Suggest you fix the errors in your markup first. See http://validator.w3.org/

Netscape 4 and IE 4 are completely obsolete by now. You should use more modern coding.

[mick463]

This is the JavaScript forum. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

You cannot carry values over from one page to another like that.
Suggest you fix the errors in your markup first. See http://validator.w3.org/

Netscape 4 and IE 4 are completely obsolete by now. You should use more modern coding.

AS i said i am new to javascript and html what are the errors in my markup i have only been doing this for 6 weeks and the teacher is more interisted in playing solitare and telling us how much she hates some of us

[Philip M]

...the teacher is more interisted in playing solitare and telling us how much she hates some of us

I can see her point.

[venegal]

You can't get the value of a checked radio box the way you were trying to.
Replace "document.form1.sex.value" by "radioSex()" and add the function:

function radioSex(){
	var radio = document.form1.sex;
	for (var i = 0; i < radio.length; i++)
 	if (radio[i].checked == true) return radio[i].value;
 	return "no sex checked";
}