CODEWITHSUNDEEP
javascriptjqueryhtml
AusTex
AusTex

Reputation: 205

How to make one of the selected options in a drop-down list of an HTML form add a text input?

I have the following code:

<label for="city">City</label>
<select id="city" name="city" required>
  <option value="">Select city</option>
  <option value="city1">city1</option>
  <option value="city2">city2</option>
  <option value="other" onselect="">Other...</option>
</select>

I would like the form to show a new input text below this drop-down list when user chooses 'other' so that he/she can input his own city. The same way, if the user chooses back one of the existing cities in the drop-down list, the generated text input would disappear.

Upvotes: 0

Views: 319

Answers (5)

AusTex
AusTex

Reputation: 205

Vadivel's fixed code:

    <script type="text/javascript">
        $( document ).ready(function() {
            $('#city_value').attr('type','hidden');
            $('#city').change( function(){
                var city=$('#city').val();

                if(city=="other")
                {
                    $('#city_value').attr('type','text');
                }
                else
                {
                    $('#city_value').attr('type','hidden');

                }
            });
        });
    </script>

Upvotes: 1

shu
shu

Reputation: 1956

Add a input after the select and make it as display none

 <label for="city">City</label>
  <select id="city" name="city" required>
   <option value="">Select city</option>
   <option value="city1">city1</option>
   <option value="city2">city2</option>
   <option value="other" onselect="">Other...</option>
  </select>
 <input id="other" style="display:none" />

and inside the script tag

<script type="text/javascript">
$(document).ready(function () {

     $('#city').on('change', function (e) {

         var selectValue = this.value;
         if (selectValue == "other") {
             $("#other").show();
         }
         else {
             $("#other").hide();
         }

     });
 });
</script>

and you also should add Jquery in your html file before the above script tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

after combine the Html and Scripts your html file should look like this

<html>
<body>

   <label for="city">City</label>
   <select id="city" name="city" required>
   <option value="">Select city</option>
   <option value="city1">city1</option>
   <option value="city2">city2</option>
  <option value="other" onselect="">Other...</option>
   </select>
  <input id="other" style="display:none" />

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 <script type="text/javascript">
 $(document).ready(function () {

 $('#city').on('change', function (e) {

     var selectValue = this.value;
     if (selectValue == "other") {
         $("#other").show();
     }
     else {
         $("#other").hide();
     }

 });
 });
</script>

</body>

</html>

Upvotes: 2

Vadivel S
Vadivel S

Reputation: 660

Use this code .

this is work fine.

You create this type use Jquery or JavaScript functions

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<body>


    <div id=" " style="">
        <label for="city">City</label>
        <select id="city" name="city" required>
          <option value="">Select city</option>
          <option value="city1" onselect="city(this.val)">city1</option>
          <option value="city2" onselect="city(this.val)">city2</option>
          <option value="other" onselect="city(this.val)">Other...</option>
        </select>
        <input type="text" value="" id="city_value" placeholder="Enter City"/>
    </div>

    <script type="text/javascript">
        $( document ).ready(function() {
                 $('#city_value').hide();
                 $('#city').change( function(){
                        var city=$('#city').val();
                        if(city=="other")
                        {

                        $('#city_value').attr('required',true);
                        }
                        else
                        {
                        $('#city_value').attr('required',false);

                        }
                 });
            });
    </script>   </body>

Upvotes: 0

Vasim Shaikh
Vasim Shaikh

Reputation: 4542

JavaScript Code:

function otherOptionCall()
{
var e = document.getElementById("city");
var einput = document.getElementById("inputother");

var strUser = e.options[e.selectedIndex].value;
if(strUser == 2)
{
  einput.style.display="block";
}
else
{
 einput.style.display="none";
}
}

Html code:

<label for="city">City</label>
<select id="city" name="city" required>
  <option value="">Select city</option>
  <option value="city1">city1</option>
  <option value="city2">city2</option>
  <option value="other" onselect="otherOptionCall()">Other...</option>
</select>
<input type="text" name="strother" id="inputother" style="display:none">

Upvotes: 0

xstean
xstean

Reputation: 160

$('#city').live('change', function() {
   var selectedCity = $(this).val();
   if(selectedCity == "other"){
      $('#city').after('<input type="text" id="othercity" name="othercity">');
   }else{
      $('#othercity').remove():
   }
});

Upvotes: 0

Related Questions