How can I create a textbox if a certain item is selected in a drop-down list?

Question

I have a drop-down list that contains the following values:

<option>Aramex</option>
<option>DHL</option>
<option>FedEx</option>
<option>Other</option>

When the user select Other, I want to show a text box. How can I do that?

I'm using Laravel 4.2

Maybe you have no easy way of upgrading, but I hope you're aware that Laravel 4.2 is quite old and was not an LTS version. Security updates to that branch stopped 2 years ago. — okdewit, May 17 '17 at 22:40
@Fx32 I tried to upgrade it to Laravl 5.4, but I'm beginner and I faced many problems so I gave up — rooot_999, May 17 '17 at 23:57

clearshot66 · Answer 1 · 2017-05-17T18:59:45.073

2

One method:

<script type="text/javascript>
// Function to on change of the <select>, display the other input box
$(document).ready(function(){
    $("#choices").on("change"),function(){
    if($("#choices').val() == "Other"){
      $("#otherinput").show();
    }else{
      $("#otherinput").hide();
    }
   });
});
</script>

<!-- hide the input box initially -->
<style>
#otherinput{display: none;}
</style>
<!-- These must have values since they're options, FYI, but set an ID for select and add values to options -->
<select id='choices'>
<option value='Aramex'>Aramex</option>
<option value='DHL'>DHL</option>
<option value='FedEx'>FedEx</option>
<option value='Other'>Other</option>
</select>
<!-- hidden until you select other option within the <select> -->
<input type='text' name='textinput' id='otherinput' />

edited May 17 '17 at 18:59

answered May 17 '17 at 18:54

clearshot66

2,292
1
8
17

hanks man, but I have question the "style" section where should I put it ? – rooot_999 May 17 '17 at 21:08
Generally that code without the tags goes in a .css file separate then gets included within your HTML tags. If you're doing it within the HTML file itself, dump it in the head – clearshot66 May 18 '17 at 12:13

score 1 · Accepted Answer · answered May 18 '17 at 03:04

here is the correct fix:

<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="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
    <option selected="selected">Please select ...</option>
    <option value="DHL">DHL</option>
    <option value="Aramex">Aramex</option>
    <option value="FedEx">FedEx</option>
    <option value="Other">Other</option>
    </select>
    <div id="div1"></div>

How can I create a textbox if a certain item is selected in a drop-down list?

2 Answers2