CODEWITHSUNDEEP
javascriptjqueryhtml
user5358888
user5358888

Reputation: 207

Add a text field to html dropdown

I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text

drop down html is :

<select name="drop">
    <option selected="selected">Please select ...</option>
    <option value="car">car</option>
    <option value="bike">bike</option>
    <option value="Other">Other</option>
</select>

Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.

Thanks in advance

Upvotes: 4

Views: 1673

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could add hidden input field by default for other text :

<input type='text' id='other' name='other' style="display:none"/>

And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :

$('select').on('change', function(){
     if($(this).val()=='Other'){
         $('#other').show().focus();
     }else{
         $('#other').val('').hide();
     }
})

Hope this helps.

$('select').on('change', function(){
  if($(this).val()=='Other'){
    $('#other').show().focus();
  }else{
    $('#other').val('').hide();
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
  <option selected="selected">Please select ...</option>
  <option value="car">car</option>
  <option value="bike">bike</option>
  <option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>

Upvotes: 4

gavgrif
gavgrif

Reputation: 15499

you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.

 <input id="transportOptions" list="transport">

<datalist id="transport">
  <option value="Car">
  <option value="Bike">
  <option value="Scooter">
  <option value="Taxi">
  <option value="Bus">
</datalist>

Upvotes: 0

S M
S M

Reputation: 3233

<script type="text/javascript">
function showfield(name){
  if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
  else document.getElementById('div1').innerHTML='';
}
</script>

<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

Upvotes: 1

Related Questions