Hello,
I am a complete beginner to JavaScript and learning as I go along.
I have a dropdown list of "channel" and would like to show a different set of fields depending on user selection:
<select onchange="channelChoice(this)" name="Channel" id="Channel">
<option value="Banner_">Banner</option>
<option value="Retailer_">Retailer</option>
<option value="Print_">Print</option>
<option value="Social_">Social</option>
<option value="Website_">Website</option>
</select>
<div id="retailerOption" style="display:none">
<select onchange="retailerChoice(this)" name="Retailer" id="Retailer">
<option value="Amazon">Amazon</option>
<option value="Other">Other</option>
</select>
<input type="text" id="RetailerName" placeholder="select your retailer" style="display:none;">
</div>
<div id="printOption" style="display:none">
<select onchange="printChoice(this)" name="Print" id="Print">
<option value="Magazine">Magazine</option>
<option value="Journal">Journal</option>
<option value="Stands">Stands</option>
<option value="Other">Other</option>
</select>
<input type="text" id="PrintType" name="PrintType" placeholder="what is your print asset type?" style="display:none;">
</div>
<div id="socialOption" style="display:none">
<select name="SocialMedia" id="SocialMedia">
<option value="Facebook">Facebook</option>
<option value="Instagram">Instagram</option>
<option value="YouTube">YouTube</option>
</select>
<select name="SocialPostFormat" id="SocialPostFormat">
<option value="Carousel">Carousel</option>
<option value="Static_Post">Static Post</option>
<option value="Story">Story</option>
<option value="Video">Video</option>
</select>
</div>
<div id="webOption" style="display:none">
<select onchange="webChoice(this)" name="Country" id="Country">
<option value="AwardLogo">Award Logo</option>
<option value="RetailerLogo">Retailer Logo</option>
<option value="LandingPageImage">Landing Page Image</option>
</select>
</div>
I had been playing around with this JavaScript:
<script type="text/javascript">
function channelChoice(elem) {
if(elem.value == "Retailer_")
document.getElementById('retailerOption').style.display = 'block';
else if(elem.value == "Print_")
document.getElementById('printOption').style.display = 'block';
else if(elem.value == "Social_")
document.getElementById('socialOption').style.display = 'block';
else if(elem.value == "Website_")
document.getElementById('webOption').style.display = 'block';
}
function retailerChoice(elem) {
if(elem.value == "Other")
document.getElementById('RetailerName').style.display = 'block';
else
document.getElementById('RetailerName').style.display = 'none';
}
function printChoice(elem) {
if(elem.value == "Other")
document.getElementById('PrintType').style.display = 'block';
else
document.getElementById('PrintType').style.display = 'none';
}
</script>
I could display fields no problem but my issue is to hide if, for example, a user select "Print" after initially selecting "Retailer".
Played around by adding "none" line:
if(elem.value == "Retailer_")
document.getElementById('retailerOption').style.display = 'block';
else if(elem.value !== "Retailer_")
document.getElementById('printOption').style.display = 'none';
else if(elem.value == "Social_")
document.getElementById('socialOption').style.display = 'block';
and so on, but didn't work.
Can someone please help me how I can code so when a user selects "Retailer" then Retailer Option DIV will show but then if they selects "Print", Retailer Div disappears but "Print" DIV appears etc?
Thank you.
