?
Solved

Javascript to control forms -- help needed

Posted on 2001-08-24
8
Medium Priority
?
184 Views
Last Modified: 2008-03-17
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>
<!--// digit
function yes() {
MMDiv1.style.visibility='visible';
mainform.digit.focus();
}
function no() {
MMDiv1.style.visibility='hidden';
}
//-->

<!--// widget
function yes() {
MMDiv2.style.visibility='visible';
mainform.widget.focus();
}
function no() {
MMDiv2.style.visibility='hidden';
}
//-->

<!--// midget
function yes() {
MMDiv3.style.visibility='visible';
mainform.midget.focus();
}
function no() {
MMDiv3.style.visibility='hidden';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
  <p>What's the service<br>
    <INPUT TYPE="RADIO" NAME="digit" value=digit onclick="yes();">
    digit
    <!-- <INPUT TYPE="RADIO" NAME="digit" onclick="no();">No -->
    <br>
    <INPUT TYPE="RADIO" NAME="widget" value=widget onclick="yes();">
    widget
    <!-- <INPUT TYPE="RADIO" NAME="widget" onclick="no();">No -->
    <br>
    <input type="RADIO" name="midget" value=midget onClick="yes();">
    midget
    <!-- <INPUT TYPE="RADIO" NAME="midget" onclick="no();">No -->

<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="no();">
  samait -->
  <input type="RADIO" name="SERVICE_TYPE" onClick="yes();" value="WIDGET">
  widget
  <!--
  <INPUT TYPE="RADIO" NAME="SERVICE_TYPE" onclick="no();">
  samait -->
  <input type="RADIO" name="SERVICE_TYPE" onClick="yes();" value="MIDGET">
  midget
  <!--
  <INPUT TYPE="RADIO" NAME="SERVICE_TYPE" onclick="no();">
  samait -->
  <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.

0
Comment
Question by:jamaica
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6423690
Here is a working version of the first script:

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

// digit
function digit_yes() {
MMDiv1.style.visibility='visible';
mainform.digit.focus();
}
function digit_no() {
MMDiv1.style.visibility='hidden';
}


// widget
function widget_yes() {
MMDiv2.style.visibility='visible';
mainform.widget.focus();
}
function widget_no() {
MMDiv2.style.visibility='hidden';
}

// midget
function midget_yes() {
MMDiv3.style.visibility='visible';
mainform.midget.focus();
}
function midget_no() {
MMDiv3.style.visibility='hidden';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
 <p>What's the service<br>
   <INPUT TYPE="RADIO" value=digit onclick="digit_yes();">
   digit
   <!-- <INPUT TYPE="RADIO" onclick="no();">No -->
   <br>
   <INPUT TYPE="RADIO" value=widget onclick="widget_yes();">
   widget
   <!-- <INPUT TYPE="RADIO" onclick="no();">No -->
   <br>
   <input type="RADIO" value=midget onClick="midget_yes();">
   midget
   <!-- <INPUT TYPE="RADIO" onclick="no();">No -->

<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
0
 
LVL 15

Accepted Solution

by:
a.marsh earned 400 total points
ID: 6423702
Here is the second script - same problem:


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


function widget_yes() {
digit_no();
midget_no();
MMDiv1.style.color ='black';
mainform.widget.disabled=false;
mainform.widget.focus();
}
function widget_no() {
MMDiv1.style.color ='gray';
mainform.widget.disabled=true;
}


function midget_yes() {
digit_no();
widget_no();
MMDiv2.style.color ='black';
mainform.midget.disabled=false;
mainform.midget.focus();
}
function midget_no() {
MMDiv2.style.color ='gray';
mainform.midget.disabled=true;
}
</script>
</HEAD>
<BODY>

<FORM NAME="mainform" method="post" action="me.pl">
 What Service is this?
 <input type="RADIO" name="SERVICE_TYPE" onClick="digit_yes();" value="DIGIT">
 digit
 <input type="RADIO" name="SERVICE_TYPE" onClick="widget_yes();" value="WIDGET">
 widget
 <input type="RADIO" name="SERVICE_TYPE" onClick="midget_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>



:o)

Ant
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6423758
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
   <!-- <INPUT TYPE="RADIO" NAME="digit" onclick="no();">No -->
   <br>
   <INPUT TYPE="RADIO" NAME="widget" value=widget onclick="showDiv()">
   widget
   <!-- <INPUT TYPE="RADIO" NAME="widget" onclick="no();">No -->
   <br>
   <input type="RADIO" name="midget" value=midget onClick="showDiv()">
   midget
   <!-- <INPUT TYPE="RADIO" NAME="midget" onclick="no();">No -->

<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>
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 15

Expert Comment

by:a.marsh
ID: 6423780
I purposely tried to change the code as little as possible so that you still have an understanding of what is happening.

:o)

Ant
0
 
LVL 8

Expert Comment

by:bebonham
ID: 6423823
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
0
 

Author Comment

by:jamaica
ID: 6427295
a.marsh.
thank you for helping me with this script, I appreciate very much.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6427835
Glad to help. :o)

Why only worth a B grade though???

:o\

Ant
0
 
LVL 15

Expert Comment

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

:o)

Ant
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question