How do I hide/show HTML input boxes when I toggle HTML Select box values?

Question

Assume there is a form with the following three fields:

HTML Select box with two values (Metric/English)
HTML Input box with label value_metric
HTML Input box with label value_english

For end-user I want only the two fields shown, the select box, and the corresponding metric or English Input box. Toggling the select box shows/hides the corresponding input boxes.

How do I do this? How do I hide one while showing the other? I am looking for the method of operation, not necessarily the actual code.

For example, do I hide it, disable it, make it read only, do something else? I want it to seamlessly update and swap when I toggle the Select box.

These should help: Get select value: https://stackoverflow.com/questions/7817270/selected-value-from-select-box-in-javascript JavaScript hide/show element: https://stackoverflow.com/questions/6242976/javascript-hide-show-element — Joe Fitzsimmons, Oct 23 '18 at 18:27
Thanks, https://stackoverflow.com/a/4397014/2883328 seems to help! — Dennis, Oct 23 '18 at 18:37

score 2 · Accepted Answer · answered Oct 23 '18 at 18:34

$('select').change(function(){
if($(this).val()==="metric"){
    $('.metric_val').show();
    $('.english_val').hide();
}else{
    $('.english_val').show();
    $('.metric_val').hide();
}
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="type">
  <option value="metric">Metric</option>
  <option value="english">English</option>
</select>

<input class="metric_val" type="text" name="metric_val" placeholder="METRIC">
<input class="english_val" type="text" name="english_val" placeholder="ENGLISH">

score 1 · Answer 2 · edited Oct 23 '18 at 18:38

Running example: Hope this helps

function myFunction(){
var _select_box_val = document.getElementById("select_box").value;
if("Metric"==_select_box_val){   
  document.getElementById("value_metric").style.display = "block";          
  document.getElementById("value_english").style.display = "none";
}else if("English"==_select_box_val){          
 document.getElementById("value_english").style.display = "block";          
 document.getElementById("value_metric").style.display = "none";
}
}
myFunction();

.hide{
   display:none;
  }

<select id="select_box" onchange="myFunction()">
   <option>Metric</option>
   <option>English</option>
  </select>
  <input type="text" placeholder="value_metric"  id="value_metric"  class="hide">
  <input type="text" placeholder="value_english" id="value_english" class="hide">

Jae Yang · Answer 3 · 2018-10-23T18:36:37.977

You can use javascript to hide and show the html input boxes based on the select box. Add a Eventlistener to the selectbox which in turn can call functions such as,

function toggleMetric(){
    var metricBox = document.getElementbyID('value_metric');
    var englishBox = document.getElementbyID('value_english');    

    metricBox.style.display = 'block';
    englishBox.style.display = 'none';
}

Then with that value you can then change the style of the input box to be display block or none depending if you want to show it or not. For example,

score 0 · Answer 4 · answered Oct 23 '18 at 19:20

$('select').change(function() {
       if($(this).val() == 'Metric') {
         $('#Metric').show();
         $('#English').hide();
       }else{
         $('#English').show();
         $('#Metric').hide();
       }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <select>
    <option value="Metric">Metric</option>
    <option value="English">English</option>
 </select>
<input type="text" name="Metric" id="Metric">
<input type="text" name="English" id="English" style="display: none;">

How do I hide/show HTML input boxes when I toggle HTML Select box values?

4 Answers4