Need help with tweaking a Dropdown with three options, user selects one - a hidden div appears with correct fields
Posted
by
Jack
on Stack Overflow
See other posts from Stack Overflow
or by Jack
Published on 2011-01-13T21:14:30Z
Indexed on
2011/01/13
21:53 UTC
Read the original article
Hit count: 160
Hello Again, I posted a question on here and got an answer within minutes I'm hoping the wizards on here can help me again.
Okay so I'm using a script I found online to try and add this function to a shopping cart form.
Here's the setup.
I have a payment method dropdown with Visa, Mastercard and Bank Withdrawal as the options.
For the credit cards I have one hidden div with a certain set of fields, and for the bank I have another hidden div. Each of the divs have named ID's - #payCredit and #payBank
The css for both have margin: 0px and display: none;
Here's a peice of javascript I used successfuly on a shipping address checkbox
`function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}`
I was hoping I could change it slightly to meet my needs.
Here's the dropdown
<label>Payment Method:</label>
<select name="payment" id="payment" class="dropdown3" style="width:8em">
<option selected="selected">Select</option>
<option value="Visa" onclick="javascript:toggleLayer('payCredit');">Visa</option>
<option value="MasterCard" onclick="javascript:toggleLayer('payCredit');">Mastercard</option>
<option value="Direct" onclick="javascript:toggleLayer('payBank');">Direct Withdraw</option>
</select></li>
The current result is that it kinda works.
I can open the dropdown and select Visa and it appears, if I select Visa again it disappears, if I select Visa and then select bank, both appear.
You can see what i'm working on here - http://test.sharevetcare.com/bestfriends/cart3.html
© Stack Overflow or respective owner