Solved

Toggle display of DIV based on onSelect event handler

Posted on 2006-06-09
7
601 Views
Last Modified: 2010-08-05
Now I'm trying to toggle the display of DIVs based on onSelect event handler.

This is my javascript:

function showDiv(divID) {
if (document.getElementById(divID).style.display == 'block';)
{document.getElementById(divID).style.display = 'none';}
else
{document.getElementById(divID).style.display = 'block';}
}

And this is my HTML:

Type of payment account:
<select name="paymentAccountType" onchange="showDiv(this.value);" >
     <option></option>
     <option value="credit">Credit card</option>
     <option value="debit">Debit card</option>
     <option value="eft">EFT</option>
     </select>


<div id="credit" style="display:none;">Credit card</div>
<div id="debit" style="display:none;">Debit card</div>
<div id="EFT" style="display:none;">EFT</div>
0
Comment
Question by:mariita
[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
  • 3
  • 3
7 Comments
 
LVL 19

Expert Comment

by:nschafer
ID: 16873041
Hi mariita,

Try this.

function showDiv(divID) {
  document.getElementById('EFT').style.display='none';
  document.getElementById('credit').style.display='none';
  document.getElementById('debit').style.display='none';
  document.getElementById(divID).style.display = 'block';
}

Hope this helps,
Neal.
0
 

Author Comment

by:mariita
ID: 16873081
Is there a way to do it generically?
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16873101
function showDiv(divID) {
      var divs = ("credit,debit,eft").split(',');
      for (ix=0; ix < divs.length; ix++) {
            if (divs[ix].match(divID)) {
                 document.getElementById(divs[ix]).style.display = 'block';
            }
            else {
                 document.getElementById(divs[ix]).style.display = 'none';
            }
      }
}


<select name="paymentAccountType" onchange="showDiv(this.value);" >
     <option value="">Select Option</option>
     <option value="credit">Credit card</option>
     <option value="debit">Debit card</option>
     <option value="eft">EFT</option>
</select>
<div id="credit" style="display:none;">Credit card</div>
<div id="debit" style="display:none;">Debit card</div>
<div id="eft" style="display:none;">EFT</div>
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 29

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 16873129
Following is more generic, which passes the str (delimited div ids)

function showDiv(divID, divstr) {
      var divs = divstr.split(',');
      for (ix=0; ix < divs.length; ix++) {
            if (divs[ix].match(divID)) {
                 document.getElementById(divs[ix]).style.display = 'block';
            }
            else {
                 document.getElementById(divs[ix]).style.display = 'none';
            }
      }
}

<select name="paymentAccountType" onchange="showDiv(this.value, 'credit,debit,eft');" >
     <option value="">Select Option</option>
     <option value="credit">Credit card</option>
     <option value="debit">Debit card</option>
     <option value="eft">EFT</option>
</select>
<div id="credit" style="display:none;">Credit card</div>
<div id="debit" style="display:none;">Debit card</div>
<div id="eft" style="display:none;">EFT</div>

0
 

Author Comment

by:mariita
ID: 16873134
But is there a way to hide the non-selected DIVS while not actually naming them in a variable? Otherwise I would have to use a separate Javascript function for every SELECT.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16873380
you can find all div in current page . but how to relate them with select .
Hence

last post, gives flexibility to supply the div ids , by that way you could use same function for different
select .


0
 

Author Comment

by:mariita
ID: 16873398
Yes, I actually sent my last comment before seeing your solution.

Thanks again for your help!
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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

624 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