How to show and hide form control while changing select box options

Question

I have 2 select box in html. First is for Country and second is for city. I need to show a textbox when user select country other then Pakistan and show a drop down list for city if user select Pakistan form country dropdown.

Here is my code which i tried:

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <div class="form-group col-md-3">
    <label for="cc-payment" class="control-label mb-1">Birth Country</label>
    <select class="form-control" name="Birth_Country" id="Birth_Country" style="color:  black;" required>
      <option value="">Please Select Birth Country</option>
      <?php
      $sel_cus = "select Country_Name from personal_country_name Order By Country_Name";
      $res_cus = mysqli_query($connection, $sel_cus);
      while ($row = mysqli_fetch_array($res_cus)) {?>
      <option value="<?php echo $row['Country_Name'];?>"><?php echo strtoupper($row['Country_Name']);?></option>

      <?php
      }
      ?>
    </select>
  </div>
  <div class="form-group col-md-3">

    <label for="cc-payment" class="control-label mb-1">Birth City</label>

    <select class="  form-control  " name="Birth_City" id="Birth_City" style="color:  black;" required>
      <option value="">Please Select Birth City</option>
      <?php
      $sel_cus = "select city_name from personal_city_name order By city_name";
      $res_cus = mysqli_query($connection, $sel_cus);
      while ($row = mysqli_fetch_array($res_cus)) {?>
      <option value="<?php echo $row['city_name'];?>"><?php echo strtoupper($row['city_name']);?></option>

      <?php
      }
      ?>
    </select>
    <input type="text" autocomplete="off" onkeyup="this.value = this.value.toUpperCase();" class="form-control   "
           name="Birth_City" id="other" style="color:  black;" value="<?php echo $data['Birth_City']?>" required
           data-toggle="tooltip" title="Birth City" placeholder="Birth City"/>
  </div>
  <button type="submit" class="btn btn-primary pull-right"
          style=" margin-right: 430px; width: 105px; height: 42px; margin-top: 22px; " value="Save" name="Save"
          id="Save">Save
  </button>
</form>

I would try to post the question with a workable example. Strip out and flatten all the PHP as it's not relevant to the question. You're looking for dependent dropdowns I think. — Matt, Jan 14 '20 at 05:16

score 1 · Answer 1 · answered Jan 14 '20 at 05:15

Try this Jquery code

$(function(){
$("#city").hide();
});
$("#country").change(function(){
if($("#country").val() !="" )
{
$("#city").show();
} else {

$("#city").hide();
}
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
<option value="">select country</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="city">
<option value="">select city</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

And instead of hide and show you can do whatever you need like to show a selected values for the child depends on the parent — Basil, Jan 14 '20 at 05:19

score 1 · Answer 2 · answered Jan 14 '20 at 05:27

Added an example based on your requirement. So you need do the following things.

Hide both controls
Enable control based on the value from select

function hideBoth() {
  $('#cityText').hide();
  $('#city').hide();

}
$(document).ready(function() {
  $('#country').on('change', function() {
    hideBoth();
    var country = $.trim(this.value).toLowerCase();
    if (country !== "pakistan") {
      $('#cityText').show();
    } else {
      $('#city').show();
    }
  });
});

.hide {
  display: none;
}

.show {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="country">
  <option value="">Select</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="Pakistan">Pakistan</option>
  <option value="India">India</option>
  <option value="Iran">Iran</option>
  <option value="Nepal">Nepal</option>
</select>

<select id="city" class="hide">
  <option value="">Select</option>
  <option value="1">City 1</option>
  <option value="2">City 2</option>
  <option value="3">City 3</option>
  <option value="4">City 4</option>
  <option value="5">City 5</option>
  <option value="6">City 6</option>
</select>

<input type="text" placeholder="Enter your city" class="hide" id="cityText" />

It works for me but form is unable to submit it shows following error An invalid form control with name='city' is not focusable. Physical.php:1 Can you please assist me — Muhammad Tanzeel Arshad, Jan 14 '20 at 05:41
This page may help: https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable. You may need to remove the "required" attribute from those input elements, since you are designing a form where both would not be used. — chris, Jan 14 '20 at 06:17

score 0 · Answer 3 · answered Jan 14 '20 at 05:32

use jquery

<script>
$(document).ready(function(){
$("#Birth_Country").onchange(function(){
$country = $('#Birth_Country').val();
if ($country == "Pakistan") {
$("#Birth_City").show();
$("#other").hide();
}else {
$("#other").show();
$("#Birth_City").hide();
}
}
});
</script>

include script file in php also jquery file

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

How to show and hide form control while changing select box options

3 Answers3