[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Javascript to control forms -- help needed

Posted on 2001-08-24
8
Medium Priority
?
190 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

873 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