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: 137

Filed under:
|
|

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

Related posts about JavaScript

Related posts about css