Showing / hiding a different set of fields depending on selection from a dropdown

[Kana]

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. 

[Ingolme]

What you need to do is hide all of the fields except for the one that you want visible. To be able to loop through all of the fields it would be good to give them a class name.

I recommend keeping the Javascript separated from the HTML by removing the onchange attributes and using Javascript's addEventListener() method.

This updated HTML structure will help:

<select 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 class="optionfields" id="retailerOption" style="display:none">
  ...
</div>

<div class="optionfields" id="printOption" style="display:none">
  ...
</div>

<div class="optionfields" id="socialOption" style="display:none">
  ...
</div>

<div class="optionfields" id="webOption" style="display:none">
  ...
</div>

Then the script can look like this:

// Only attach the event once the element is available
window.addEventListenr("DOMContentLoaded", function() {

  var channel = document.getElementById("channel");
  channel.addEventListener("change", channelChoice);

});

function channelChoice(e) {
  // Associate options with element ids.
  // This step could be removed if the ids are identical to the option values.
  const lookup = {
    "Retailer_" : "retailerOption",
    "Print_"    : "printOption",
    "Social_"   : "socialOption",
    "Website_"  : "websiteOption"
  };
  
  // Hide all of the fields for now
  let fields = document.getElementsByClassName("optionfields");
  for(let i = 0; i < fields.length; i++) {
    fields[i].style.display = "none";
  }
  
  // The variable e contains information about the event.
  // The channel dropdown can be accessed from e.currentTarget.
  let channel = e.currentTarget;
  
  // Show the field that we care about.
  // The value of the dropdown will tell us which element
  // to show by using the lookup table we created earlier.
  let id = lookup[ channel.value ];
  if(id) {
    let visibleOption = document.getElementById(id);
    visibleOption.style.display = "block";
  }
  
}

 

[JMRKER]

On 11/17/2021 at 12:42 PM, Ingolme said:

What you need to do is hide all of the fields except for the one that you want visible. To be able to loop through all of the fields it would be good to give them a class name.

I recommend keeping the Javascript separated from the HTML by removing the onchange attributes and using Javascript's addEventListener() method.

This updated HTML structure will help:

...

 

Except for a couple of typos:
change 'window.addEventListenr("DOMContentLoaded", function() {' to 'window.addEventListener("DOMContentLoaded", function() {'

and '"Website_" : "websiteOption" to "Website_" : "webOption"