asked on

Javascript to control forms -- help needed

I'm trying to create a javascript that'll control a form a form's selection box thru the radio button control. I did two samples but cannot get either to work.

This first script has 3 radio button selection, the client is to select one button and the selection/combo box will list the option fields that are relative to the radio button selected. Therefore, the user will not see the results of the other buttons, unless he clicks on it. Example, if you select a button that says Fruits, then it will only pop-out the selection box with list of fruits. If selects, jewels, then the selection box of jewels will be listed.

The problem I'm having -- regardless of which radio button I click, I'm not getting the correct selection box, just one particular selection box keeps popping out.

See my sample below
<HTML>
<HEAD>
<TITLE>please work</TITLE>
<SCRIPT>





</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
<p>What's the service<br>
<INPUT TYPE="RADIO" NAME="digit" value=digit onclick="yes();">
digit

<br>
<INPUT TYPE="RADIO" NAME="widget" value=widget onclick="yes();">
widget

<br>
<input type="RADIO" name="midget" value=midget onClick="yes();">
midget


<p>
<DIV ID="MMDiv1" style="visibility:hidden">
<select name=digit>
<option value=digit1>digit1</option>
<option value=digit2>digit2</option>
</select>
</div>
<DIV ID="MMDiv2" style="visibility:hidden">
<select name=widget>
<option value=widget1>widget1</option>
<option value=widget2>widget2</option>
</select>
</div>
       <DIV ID="MMDiv3" style="visibility:hidden">
<select name=midget>
<option value=midget1>midget1</option>
<option value=midget2>midget2</option>
</select>
</DIV>

<BR>

<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>

=======
The next form is pretty similar, this time I'm trying to use the DISABLE (gray out) feature. That is, there are 3 radio button, select one radio button and it will enable the selection box that is relative to it and the other two selection boxes will remain disabled.

The problem I'm having, I select for e.g., the radio button, I get the selection box for the 3rd radio button ... regardless of which radio button I get, I keep getting the selection box for only the third one.

Here's my sample script

<HTML>
<HEAD>
<TITLE>blah</TITLE>
<SCRIPT>
function yes() {
MMDiv.style.color ='black';
mainform.digit.disabled=false;
mainform.digit.focus();
}
function no() {
MMDiv1.style.color ='gray';
mainform.digit.disabled=true;
mainform.digit.value='';
}

function yes() {
MMDiv1.style.color ='black';
mainform.widget.disabled=false;
mainform.widget.focus();
}
function no() {
MMDiv1.style.color ='gray';
mainform.widget.disabled=true;
mainform.widget.value='';
}

function yes() {
MMDiv2.style.color ='black';
mainform.midget.disabled=false;
mainform.midget.focus();
}
function no() {
MMDiv2.style.color ='gray';
mainform.midget.disabled=true;
mainform.midget.value='';
}
</script>
</HEAD>
<BODY>

<FORM NAME="mainform" method="post" action="me.pl">
What Service is this?
<input type="RADIO" name="SERVICE_TYPE" onClick="yes();" value="DIGIT">
digit

<input type="RADIO" name="SERVICE_TYPE" onClick="yes();" value="WIDGET">
widget

<input type="RADIO" name="SERVICE_TYPE" onClick="yes();" value="MIDGET">
midget

<BR>

Select a Service<DIV ID="MMDiv" style="color:gray">
<select name="digit" DISABLED>
<option value="digit1">digit1</option>
<OPTION VALUE="digit1">digit2</option>
</SELECT>
      </div>
      <DIV ID="MMDiv1" style="color:gray">
<select name="widget" DISABLED>
<option value="widget1">widget1</option>
<option value="widget2">widget2</option>
</select>
</DIV>
<DIV ID="MMDiv2" style="color:gray">
<select name="midget" DISABLED>
<option value="midget1">midget2</option>
<option value="midget2">midget2</option>
</select>
</DIV>

<p>name
<input type="text" name="realname">
<br>
email
<input type="text" name="email">
</p>
<p><BR>
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">

<input type="hidden" name="recipient" value="tome@tome.com">
<input type="hidden" name="required" value="realname, email">
<input type="hidden" name="print_config" value="realname,email">
</p>
</FORM>
</BODY>
</HTML>

I do like the feature of the first one but it doesn't matter which one works. Thank you much and whosoever helps, will be awarded their points.

a.marsh

Here is a working version of the first script:

<HTML>
<HEAD>
<TITLE>please work</TITLE>
<SCRIPT>

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
<p>What's the service<br>
<INPUT TYPE="RADIO" value=digit onclick="digit_yes();">
digit

<br>
<INPUT TYPE="RADIO" value=widget onclick="widget_yes();">
widget

<br>
<input type="RADIO" value=midget onClick="midget_yes();">
midget


<p>
<DIV ID="MMDiv1" style="visibility:hidden">
<select name=digit>
<option value=digit1>digit1</option>
<option value=digit2>digit2</option>
</select>
</div>
<DIV ID="MMDiv2" style="visibility:hidden">
<select name=widget>
<option value=widget1>widget1</option>
<option value=widget2>widget2</option>
</select>
</div>
<DIV ID="MMDiv3" style="visibility:hidden">
<select name=midget>
<option value=midget1>midget1</option>
<option value=midget2>midget2</option>
</select>
</DIV>

<BR>

<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>

It is working, but could be tidied up a little bit more.

The biggest problem was that you have three functions called yes and three called no - you can't have that! :o)

Ant

ASKER CERTIFIED SOLUTION

a.marsh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bebonham

here is the first script fixed
and cleaned up a bit

<HTML>
<HEAD>
<TITLE>please work</TITLE>
<SCRIPT>

function showDiv()
{
//map of names
product = new Array()
product["digit"]="MMDiv1"
product["widget"]="MMDiv2"
product["midget"]="MMDiv3"
ele=(document.all) ? event.srcElement : e.target

//hide all divs...so we only have 1 visible
for(i in product)
{
if(i!=ele.value){
document.getElementById(product[i]).style.visibility="hidden"
}}
//show the correct div
document.getElementById(product[ele.value]).style.visibility="visible"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
<p>What's the service<br>
<INPUT TYPE="RADIO" NAME="digit" value=digit onclick="showDiv();">
digit

<br>
<INPUT TYPE="RADIO" NAME="widget" value=widget onclick="showDiv()">
widget

<br>
<input type="RADIO" name="midget" value=midget onClick="showDiv()">
midget


<p>
<DIV ID="MMDiv1" style="visibility:hidden">
<select name=digit>
<option value=digit1>digit1</option>
<option value=digit2>digit2</option>
</select>
</div>
<DIV ID="MMDiv2" style="visibility:hidden">
<select name=widget>
<option value=widget1>widget1</option>
<option value=widget2>widget2</option>
</select>
</div>
<DIV ID="MMDiv3" style="visibility:hidden">
<select name=midget>
<option value=midget1>midget1</option>
<option value=midget2>midget2</option>
</select>
</DIV>

<BR>

<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM>
</BODY>
</HTML>

a.marsh

I purposely tried to change the code as little as possible so that you still have an understanding of what is happening.

:o)

Ant

bebonham

yeah, my determining calling element was a little out of hand...but still..

that should be done from 1 function eh? oh well.

at least we all know that if you define a function more than once you are only getting the last definition.

Bob

jamaica

ASKER

a.marsh.
thank you for helping me with this script, I appreciate very much.

a.marsh

Glad to help. :o)

Why only worth a B grade though???

:o\

Ant

a.marsh

For anyone reading this question in the future a moderator (quite correctly) changed the grade from a B to an A.

:o)

Ant