Stack Overflow
Stack Overflow

HTML `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Examples). – showdev Mar 15 '18 at 00:53

1 Answers1

1

The main issue I see is that the onchange handlers should be bound to the <select> elements rather than the <option> elements.

There also seems to be a nested <form>, which might cause problems.

function displayCountry(answer) {
  document.getElementById(answer).style.display = "block";
  if (answer == "China") {
    document.getElementById("India").style.display = "none";
    document.getElementById("USA").style.display = "none";
  } else if (answer == "India") {
    document.getElementById("China").style.display = "none";
    document.getElementById("USA").style.display = "none";
  } else if (answer == "USA") {
    document.getElementById("China").style.display = "none";
    document.getElementById("India").style.display = "none";
  }
}

function displayProvince(answer) {
  document.getElementById(answer).style.display = "block";
  if (answer == "Beijing Municipality") {
    document.getElementById("Tianjin Municipality").style.display = "none";
  } else if (answer == "Tianjin Municipality") {
    document.getElementById("Beijing Municipality").style.display = "none";
  }
}

function displayChinaCity(answer) {
  document.getElementById(answer).style.display = "block";
  if (answer == "Beijing") {
    document.getElementById("Dongcheng").style.display = "none";
  } else if (answer == "Dongcheng") {
    document.getElementById("Beijing").style.display = "none";
  }
}
<div class="container">
  <h3>Add Client</h3>
  <div class="tab-content">
    <form action="/add/clients" method="post">

      <div class="top-row">
        <div class="field-wrap">
          <label>Client ID<span class="req">*</span><input></label>
        </div>
      </div>

      <div class="top-row">
        <div class="field-wrap">
          <label>Client name<span class="req">*</span><input></label>
        </div>
      </div>

      <div class="field-wrap">
        <label>Client type<span class= "req">*</span><select></select></label>
      </div>


      <div class="field-wrap">
      
        <label>Client Origin<span class="req">*</span>
          <select name="country" onchange="displayCountry(this.value)">
            <option selected= "--">--</option>
            <option value= "China" >China</option>
            <option value= "India" >India</option>
            <option value= "USA"  >USA</option>
          </select>
        </label>

        <div id="USA" style="display:none;">
          <select></select>
        </div>

        <div id="China" style="display:none;"><br/>
          Select Province<span class="req">*</span>
          <select name="province" onchange="displayProvince(this.value)">
            <option selected= "--">--</option>
            <option value= "Beijing Municipality" >Beijing Municipality</option>
            <option value= "Tianjin Municipality">Tianjin Municipality</option>
          </select>
        </div>
        
        <div id="India" style="display:none;">
          <select></select>
        </div>

        <div id="Beijing Municipality" style="display:none;"><br/>
          Select City<span class="req">*</span>
          <select name="city" onchange="displayChinaCity(this.value)">
            <option selected= "--">--</option>
            <option value= "Beijing">Beijing</option>
            <option value= "Dongcheng">Dongcheng</option>
          </select>
        </div>

      </div>
    </form>
  </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
  • You, sir, are a genius. Thank you! Got the full blown version of the code to work – whatanoob Mar 15 '18 at 01:27
  • A follow-up question: if I wanted to autofill a subsequent form field with the corresponding ZIP code for the city selected, how would I go about doing that? Would I define that in a function or do I just code it in html? Many thanks – whatanoob Mar 15 '18 at 17:41
  • That might be best asked as a separate question. How are you determining the zip code for any particular city? – showdev Mar 15 '18 at 18:19
  • I just realized each city may have multiple zip codes. May have to think this over. I will post a separate question if need be. Thanks for your help – whatanoob Mar 15 '18 at 18:30
  • oh, well I guess a simple alternative would be to require a certain number of digits for the zip code depending on location i.e. zip codes in the USA contain 5 digits, zip codes in China contain 6 digits... However, I'm not certain how to place this form field after the user selects a city (and not right after they select a country) – whatanoob Mar 15 '18 at 18:35
  • I guess I will ask this here since it is directly related to this question. I've noticed that if you go from country to country i.e. select a province and city from China, and then decide to switch to USA, the dropdowns for China remains there. How do you reset upon switching of countries? – whatanoob Mar 16 '18 at 22:59