Solved

Javascript to control forms -- help needed

Posted on 2001-08-24
8
176 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
  • 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 100 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

896 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now