Solved

Select List Dependency - Adds multiple input fields if certain selection is selected

Posted on 2004-08-20
10
267 Views
Last Modified: 2009-12-16
Hi - Does anyone know how to make multiple input boxes appear only if a certain selection is selected from a drop down list?

Say I have this on select list:
A
B
C
Other

If the user specifies "Other"
Then a multiple input boxes will appear below the select list...
such as for example
Name of Company:
Company Website:
Company Phone Number:
Company Address:


 if you can, please don't just simply hide the multiple input boxes.. but make it push the content below the select list down and then make the multiple input boxes appear... kind of like this: http://www.vangusa.com/info.php?page=facts
the content is pushed down if the button is clicked..

 if this can be done so it's cross-browser compatible(not a priority).. that would be great! also not a priority if validation can be engaged only if "other" is selected for the aforementioned input fields..

thanks!
0
Comment
Question by:andreni78
[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
  • 3
  • 2
10 Comments
 

Author Comment

by:andreni78
ID: 11857591
btw.. I already have the validation script from http://www.javascript-coder.com/
and already use that script as the validator.. so if you can somehow engage certain validation only if "other" is clicked.. think that'll be easier than making a validation script from scratch... a lot easier on me too =)
0
 
LVL 14

Accepted Solution

by:
Esopo earned 500 total points
ID: 11857981
Hi andreni78,


You can use an invisible DIV to hide the data. A javascript function will change the style of the DIV to make it visible:

This goes inside the <head> </head> tags:
****************************
<style type="text/css">
<!--
.HideIt {
    display:none;
}
-->
</style>
<style type="text/css">
<!--
.ShowIt {
    display:inline;
}
-->
</style>
****************************



This goes in your <body> </body>:

****************************
<script language="JavaScript">
<!--
function MakeChange(){
if (form1.select.value=="other"){
   Boxes.className='ShowIt';
 }else{
   Boxes.className='HideIt';  
}
}
//-->
</script>
<form name="form1">
  <select name="select" onChange="MakeChange()">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="B">C</option>
    <option value="other">other</option>
  </select>
  <div class="HideIt" id="Boxes">
    <p> Name of Company:
      <input name="" type="text">
    </p>
    <p> Company Website:
      <input type="text" name="textfield">
    </p>
    <p> Company Phone Number:
      <input type="text" name="textfield2">
    </p>
    <p> Company Address:
      <input type="text" name="textfield3">
    </p>
  </div>
</form>
--- Some other content ---
****************************

Hope this is what you wanted. The validation is completely indifferent to the showing or hiding, just validate as usual.


Best regards,

Esopo.
0
 

Author Comment

by:andreni78
ID: 11858042
you're right the validation is indifferent.. what i meant was.. required validation.. so if "other" selected.. the required validation is engaged.. so it'll tell the user s/he must type something... or would that be way too complex?
0
Technology Partners: 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!

 

Author Comment

by:andreni78
ID: 11858104
wow.. netscape 7.1 is absolutely horrid.. it doesn't even work on ns7.1
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11858286
Here the Netscape version:
<style type="text/css">
<!--
.HideIt {
   display:none;
}
-->
</style>
<style type="text/css">
<!--
.ShowIt {
   display:inline;
}
-->
</style>

<script language="JavaScript">
<!--
function MakeChange(theSel){
  theForm = theSel.form;
  theBoxes = document.getElementById("Boxes");
  if (theForm.select1.value=="other"){
    theBoxes.className='ShowIt';
   }else{
     theBoxes.className='HideIt';  
  }
}
//-->
</script>
<body>
<form name="form1">
 <select name="select1" onChange="MakeChange(this)">
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="B">C</option>
   <option value="other">other</option>
 </select>
 <div class="HideIt" id="Boxes">
    <p> Name of Company:
      <input name="" type="text">
   </p>
   <p> Company Website:
      <input type="text" name="textfield">
   </p>
   <p> Company Phone Number:
      <input type="text" name="textfield2">
   </p>
   <p> Company Address:
      <input type="text" name="textfield3">
   </p>
 </div>
</form>
</body>

0
 
LVL 14

Expert Comment

by:Esopo
ID: 11860212
Zvonko,

My bad, should have used document.getElementById("Boxes");


andreni78,

I don't think I get your validation question right, but here are some pointers:

1. If you want to validate at form submission then you can check if "other" is selected (if(form1.select.value=="other")) and then validate the related textboxes. For more on valitadion at submit check this link:
http://www.yourhtmlsource.com/javascript/formvalidation.html


2. If you want to validate during user input or right after user input, you could rely on the onChange,ONKEYPRESS and onBlur events. Exmpl: <input type="text" name="textfield2" onBlur="CheckText()">

For more on this type of validation check this link:
http://www.siteexperts.com/tips/html/ts18/page1.asp


3. Finally, you should consider some theory on validation. This is a nice link on validation theology:
http://www.xs4all.nl/~sbpoley/webmatters/formval.html


Esopo.
0
 

Author Comment

by:andreni78
ID: 11862951
thanks Esopo for your help.. I wish I could give Zvonko a share because he deserves a portion of it.. can you make this an onClick event instead of onChange:
<script language="JavaScript">
<!--
function MakeChange(theSel){
  theForm = theSel.form;
  theBoxes = document.getElementById("Boxes");
  if (theForm.select1.value=="other"){
    theBoxes.className='ShowIt';
   }else{
     theBoxes.className='HideIt';  
  }
}
//-->
</script>

I want to have an onClick function for the same concept i'm doing but it's a button instead of a select list... thanks!
0
 

Author Comment

by:andreni78
ID: 11862969
actually i'll make another post with different requirements.. look out for it! thanks!
0
 
LVL 14

Expert Comment

by:Esopo
ID: 11866298
>>I wish I could give Zvonko a share because he deserves a portion of it...<<
Yes, he does. And yes, you can split points. Instead of accepting a single answer you can click "split points" and decide how many points you want to give to as many participants as you want.

Anyway,  Zvonko will be helping you a lot here in javascript, I'm sure you will make it up to him in the near future :-)

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11866389
Sure, as Esopo stated, those will be not the last points you offer here.
And beside that are the recognition words the same value as points ;-)

But bear me: I am on Holidays and staying at home. So I am only from time to time online.
0

Featured Post

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

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

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 …
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…

687 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