simple xhtml/javascript question

[tmdphekt]

hi

got a strange problem going on. i'm putting together a form for people to sign up to a newsletter. i'd like to find out if people are already a member of my organisation during the newsletter signup process.

my code works in Firefox and Opera, but not Internet Explorer.

i'm using the following code:

<form name="survey">

	<fieldset id="membershipstatus">
	<legend>Are you already a member?</legend>
	
	<input id="alreadymember" name"member" type="radio" onclick="window.document.survey.sendapplication.checked=false" />
	<label for="alreadymember">Yes</label>
	<br />

	<input id="notmember" name"member" type="radio" onclick="window.document.survey.sendapplication.checked=true" />
	<label for="notmember">No</label>
	<br />
	
		<input id="sendapplication" name"sendapplication" type="checkbox" style="margin-left:25px" />
		<label for="sendapplication">Please send me a membership application pack</label>
		<br />	
	
	</fieldset>

</form>

the idea is to have two radio-buttons: Yes and No.
When clicking on No, the checkbox below, asking if you'd like a membership pack, should be ticked by default. If the user were to click on Yes again, this box should be unticked.

as i said, it works in Firefox and Opera but not IE. what am i doing wrong?

any help would be massively appreciated, this is driving me nuts, i bet its something really simple too...

 

[robmiller]

DOM syntax is much easier to deal with.

<script type="text/javascript">
<![CDATA[
function updateCheckbox(var checked) {
    document.getElementById('sendapplication').checked = checked;
}
]]>
</script>

<input id="alreadymember" name="member" type="radio" onclick="updateCheckbox(false)" />
<label for="alreadymember">Yes</label>
<br />

<input id="notmember" name="member" type="radio" onclick="updateCheckbox(true)" />
<label for="notmember">No</label>

I think the problem with your current code might stem from the fact that you're using name" on all your elements, as opposed to name=", but maybe not.

 

[tmdphekt]

*smacks forehead*
i can't believe i forgot to put in the "equals" characters.
that fixed it, so thanks!

i may actually opt for the DOM approach as you suggested. looks much cleaner!
thanks for your help.

 

[robmiller]

What's much cleaner and much more maintainable is to use something like Behaviour, which allows you to attach events to elements using CSS selectors, eliminating the need to use clunky onclick attributes and thus tidying up your markup.

So you could just have:

<script type="text/javascript">
<![CDATA[
function updateCheckbox(var checked) {
    document.getElementById('sendapplication').checked   = checked;
}

var myrules = {
	'#alreadymember' : function(el){
		el.onclick = function(){
			updateCheckbox(false);
		}
	},
	'#alreadymember' : function(el){
		el.onclick = function(){
			updateCheckbox(true);
		}
	},
};

Behaviour.register(myrules);
]]>
</script>

<input id="alreadymember" name="member" type="radio" />
<label for="alreadymember">Yes</label>
<br />

<input id="notmember" name="member" type="radio" />
<label for="notmember">No</label>

(You'd obviously move the Javascript to an external file for easy of mantainability and decreased download times for users.)