Dynamic radio button issues.

Question

Hello;
I changed around the way I do a contact form from one page loading onto another to just one page. I had my radio buttons working the 2 page way, but now, it throws an error and says that the TYPE is undefined in the form. The type is the name of my group of radio buttons. Here is what I'm doing, can someone help me fix this so a form will remember if it has to be reloaded what radio button you chose?
My code:
<cfform action="#cgi.script_name#" method="post">
<cfif form.type EQ 'male'>
<input name="type" type="radio" onClick="setVisibility('sub3', 'inline');setVisibility('sub4','none');setVisibility('sub5','none');" value='male' checked="checked"/>
<cfelse>
<input name="type" type="radio" onClick="setVisibility('sub3', 'inline');setVisibility('sub4','none');setVisibility('sub5','none');" value='male'/>
</cfif>
<cfif form.type EQ 'female'>
<input type="radio" name="type" value='female' onClick="setVisibility('sub3', 'none');setVisibility('sub4','inline');setVisibility('sub5', 'none');" checked="checked"/>
<cfelse>
<input type="radio" name="type" value='female' onClick="setVisibility('sub3', 'none');setVisibility('sub4','inline');setVisibility('sub5', 'none');"/>
</cfif>
<cfif form.type EQ 'child'>
<input type="radio" name="type" value='child' onClick="setVisibility('sub3', 'none');setVisibility('sub4','none');setVisibility('sub5', 'inline');" checked="checked"/>
<cfelse>
<input type="radio" name="type" value='child' onClick="setVisibility('sub3', 'none');setVisibility('sub4','none');setVisibility('sub5', 'inline');"/>
</cfif>
those are the 3, I need this form to remember your choice, they control parts of the form. The if statement is throwing the error, this is the error:
Element TYPE is undefined in FORM.
The error occurred in C:\quoteReq.cfm: line 282
Called from C:\Websites\187914kg3\quoteReq.cfm: line 276
Called from C:\Websites\187914kg3\quoteReq.cfm: line 275
Called from C:\Websites\187914kg3\quoteReq.cfm: line 260
Called from C:\Websites\187914kg3\quoteReq.cfm: line 1
280 :                 <span class="contactText">Select the type of project to get a quote.</span><br>
281 :                 <br>
282 :                 <input name="type" type="radio" id="type" onClick="setVisibility('sub3', 'inline');setVisibility('sub4','none');setVisibility('sub5','none');" value='male' <cfif form.type EQ 'male'>checked="checked"</cfif>/>
283 :                 <span class="contactText">Magnets</span>
284 :                 <input type="radio" name="type" id="type" value='female' onClick="setVisibility('sub3', 'none');setVisibility('sub4','inline');setVisibility('sub5', 'none');" <cfif form.type EQ 'female'>checked="checked"</cfif>/>   
Can anyone help me fix this please?

Answer 1

My code for this simple action is looking really nasty at this point. I agree with making this neater, it controls a lot on this page. It's a problem in the java script, let me show you how this is set up:
if you click on a radio button (step 1 in the form) it changes a spot in the site (div tags) to your selection. I'm stripping this down to just the java right now, then add in logic to it.
this is my java, but It's not working right now even strait up with no coldfusion involved.
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
</script>
<style type="text/css">
.showHide {
position: absolute;
background-color: #f1f1f1;
width: 300px;
padding: 1px;
color: black;
border: #999999 2px dashed;
display: none;
</style>
<input name="type" type="radio" onClick="setVisibility('sub3', 'inline');setVisibility('sub4','none');setVisibility('sub5','none');" value='male' checked="checked"/><span class="contactText">Magnets</span>
<input type="radio" name="type" value='female' onClick="setVisibility('sub3', 'none');setVisibility('sub4','inline');setVisibility('sub5', 'none');"/><span class="contactText">Paper Steel</span>
<input type="radio" name="type" value='child' onClick="setVisibility('sub3', 'none');setVisibility('sub4','none');setVisibility('sub5', 'inline');"/> <span class="contactText">Both</span>
my div tags
<div id="sub3" class="showHide" style="display:inline;">div one content here</div>
<div id="sub4" class="showHide">div 2 content here</div>
<div id="sub5" class="showHide">div 3 content here</div>
right now, this isn't functioning as is. I had it working, until I redid my form approach in programming. Now I need to rethink this. What I'm trying to do is this.
first, get this script working again. then, once it's swaping out div tags, I need it to remember what radio button you clicked so that respective div tag stays open on page reload of any errors from required fields. f I click on a radio button and send the form with now required fields, it brings up the proper div. I also went with the structkeyexists approach and it kind of helped me, but it's making my code really big and messy going this road.
any ideas on how to approach this problem? starting with this broken script.
Right now, there is not dynamic interaction, but i