Need help with tweaking a Dropdown with three options, user selects one - a hidden div appears with correct fields

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 an开发者_StackOverflow社区d it appears, if I select Visa again it disappears, if I select Visa and then select bank, both appear.

When you toggle Visa or Mastercard they both toggle payCredit so they toggle each other on/off. However, when you toggle payBank it does not toggle off payCredit.

You could start your toggleLayer(whichLayer) by clearing both payBank and payCredit no matter which is chosen and set both to display none, then continue on to determine which was chosen and set that display to block.

I would recommend solving a different problem... When the user enters the credit card information, I would do an onkeypress action that does a regexp match on the entered data, if the first four digits match visa then I would auto select the visa option... Also, I would use jquery to do this which would be much simpler.

This would end up something like this:

$('#credCardNumber').keypress(function(e) {
  if(/^4640/.test(this.value)) $('#cardType').val('Visa');
  if(/^6011/.test(this.value)) $('#cardType').val('Discover');
});

This assumes that your select has an option like: <option value='Visa'>Visa</option>

You could do $('#credCardNumber').blur(...) if you would be happy with selecting the card type when the user leaves the credit card number field.