Question

I have a contact form that has a drop-down for referral source. If Magazine is selected from referral source, I want to show another, hidden drop-down menu for which magazine, If another option is then selected for referral source, I want the magazine list to disappear. So far I have the following (weak sauce) JavaScript:

function showObject(id) {
    document.getElementById(id).style.display = 'block';
}
function hideObject(id) {
    document.getElementById(id).style.display = 'none';
}

And the following HTML (part of a form):

<label>Referral Source </label>
<select class="contact-input-dropdown">
    <option value="">Select One (Required)</option>
    <option value="Email from Us">Email from Us</option>
    <option value="Friend or Associate">Friend or Associate</option>
    <option value="Flyer/Mailing">Flyer/Mailing</option>
    <option value="Magazine">Magazine</option>
    <option value="Online Search Engine">Online Search Engine</option>
    <option value="Tradeshow">Tradeshow</option>
    <option value="Social Media">Social Media</option>
</select>
<br>
<label id="magazine-label" style="display:none">Magazine</label>
<select id="magazine" class="contact-input-dropdown" style="display:none;" name="magazine">
    <option value="Not Specified">Select One</option>
    <option value="X Management">X Management</option>
    <option value="Test Mag 1">Test Mag 1</option>
    <option value="Test Mag 2">Test Mag 2</option>
    <option value="Test Mag 3">Test Mag 3</option>
</select>

I want to check the Referral Source whenever it’s changed, show the Magazine input if Magazine was chosen, or hide it if Magazine was not chosen.

Answer 1

Using your javascript functions you can do the following (you can break it out into its own function if you want):

onchange="if(this.options[this.selectedIndex].value == 'Magazine') { showObject('magazine'); } else { hideObject('magazine'); }"

In your code:

<label<?php echo (strpos($errors,'referralsource')?' class="error"':''); ?>>Referral Source </label>
<select name="referral-source" class="contact-input-dropdown" onchange="if(this.options[this.selectedIndex].value == 'Magazine') { showObject('magazine'); } else { hideObject('magazine'); }">
    <option value="">Select One (Required)</option>
    <option value="Email from CleanTelligent"<?php echo ($referralsource =='Email from CleanTelligent' || $offer=='holiday-pricing'?' SELECTED':'');?>>Email from CleanTelligent</option>
    <option value="Friend or Associate"<?php echo ($referralsource =='Friend or Associate'?' SELECTED':'');?>>Friend or Associate</option>
    <option value="Flyer/Mailing"<?php echo ($referralsource =='Flyer/Mailing'?' SELECTED':'');?>>Flyer/Mailing</option>
    <option value="Magazine"<?php echo ($referralsource =='Magazine'?' SELECTED':'');?>>Magazine</option>
    <option value="Online Search Engine"<?php echo ($referralsource =='Online Search Engine'?' SELECTED':'');?>>Online Search Engine</option>
    <option value="Tradeshow"<?php echo ($referralsource =='Tradeshow'?' SELECTED':'');?>>Tradeshow</option>
    <option value="thejanitorialstore.com"<?php echo ($referralsource =='thejanitorialstore.com'?' SELECTED':'');?>>theJanitorialStore.com</option>
    <option value="Social Media"<?php echo ($referralsource =='Social Media'?' SELECTED':'');?>>Social Media</option>
</select><br>
<label>Magazine</label>
<select name="magazine" class="contact-input-dropdown" id="magazine">
    <option value="Not Specified">Select One</option>
    <option value="CM Management"<?php echo ($interest =='CM Management'?' SELECTED':'');?>>CM Management</option>
    <option value="Test Mag 1"<?php echo ($interest =='Test Mag 1'?' SELECTED':'');?>>Test Mag 1</option>
    <option value="Test Mag 2"<?php echo ($interest =='Test Mag 2'?' SELECTED':'');?>>Test Mag 2</option>
    <option value="Test Mag 3"<?php echo ($interest =='Test Mag 3'?' SELECTED':'');?>>Test Mag 3</option>
</select>