Solved

Javascript to control forms -- help needed

Posted on 2001-08-24
8
175 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

743 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

13 Experts available now in Live!

Get 1:1 Help Now