JS question

hussey

Ok I have a very simple question

In javascript I have a very simple form

consisting of two radio buttons and a button

when you click the button it should call a JS function which will tell you what radio button you clicked

see

<script language="JavaScript">
function doit() {
	if (sex.m.checked) 
		alert('male');
	else if (sex.f.checked) 
		alert('female');
	else
		alert('something wrong');
}
</script>
<form>
<input type="radio" name="sex" id="m" value="male" checked> Male
<br>
<input type="radio" name="sex" id="f" value="female"> Female
<br>
<input type="button" value="Hello world!" onclick=doit()>
</form>

the above code is incorrect

Can someone point out what the the If-condition should be??

ie if male is selected a pop-up box should appear

Evil Phil

You need to give your form a name and reference the radiobuttons off that. So if you called the form gender_frm then you would use

if (gender_frm.sex.m.checked) 

in the doit function. This works in IE 6, dunno about anything else.

hussey

Thanks

does anyone know how to get something similar with netscape??

seamus

Ok, there are two things. You need to reference variables properly. A bit like if you were looking for a folder on your computer. Just to be told, "Go to the Tools Folder" would be useless without a point of reference, i.e. "Go to the Tools Folder in the c:\windows\ directory" or "Go to the Tools Folder, one level above the folder you are currently in"

So you must give a reference for the variables. There are a few ways of doing this.

My favourite, because of doing Java, is to pass an object to the Javascript functions, so for example

<script language="JavaScript">
function doit(aForm) {
	if (aForm.sex.m.checked) 
		alert('male');
	else if (aForm.sex.f.checked) 
		alert('female');
	else
		alert('something wrong');
}
</script>
<form name="myForm">
<input type="radio" name="sex" id="m" value="male" checked> Male
<br>
<input type="radio" name="sex" id="f" value="female"> Female
<br>
<input type="button" value="Hello world!" onclick="doit(myForm)">
</form>

The other way to do it, and what seems to be the staple of Web Developers, is to reference the object directly, so..

<script language="JavaScript">
function doit() {
	if (document.myForm.sex.m.checked) 
		alert('male');
	else if (document.myForm.sex.f.checked) 
		alert('female');
	else
		alert('something wrong');
}
</script>
<form name="myForm">
<input type="radio" name="sex" id="m" value="male" checked> Male
<br>
<input type="radio" name="sex" id="f" value="female"> Female
<br>
<input type="button" value="Hello world!" onclick="doit()">
</form>

What way you choose is up to yourself.

Evil Phil

You could also pass in the value of one of the option buttons. I've used an index to reference the first button so the id attributes are no longer needed.

<script language="JavaScript">
function doit(male) {
	if (male) 
	{
		alert("Male");
	}
	else if (!male) // not male
	{
		alert("Female");
	}
	else
	{
		alert('thats just not right');
	}
}
</script>
<form name="gender_select">
<input type="radio" name="sex" value="male" checked="true"> Male
<br>
<input type="radio" name="sex" value="female"> Female
<br>
<input type="button" value="Hello world!" onclick=doit(document.gender_select.sex[0].checked)>
</form>

Again I've only tested this in IE6

hussey

function doit() {
	if (document.kevin.elements["m"].checked) 
		alert('male');
	else if (document.kevin.elements["f"].checked)
		alert('female');
	else
		alert('aggh');
}
</script>




<form name="kevin">
<input type="radio" name="sex" id="m" value="male" checked> Male
<br>
<input type="radio" name="sex" id="f" value="female"> Female
<br>
<input type="button" value="Hello world!" onclick=doit()>
</form>

works with netscape

thanks
everyone