How to have an HTML input field appear when the value 'other' is selected with PHP

Question

What I am trying to figure out is how to have an html input field appear when the value of other is selected from a dropdown menu. Right now the values for the dropdown list are coming from the results of a MySQL DB query, which works, but I can not seem to figure out how to get an input to appear when I select the other option.

$query = mysql_query("SELECT type FROM Dropdown_Service_Type"); // Run your query

        echo '<select name="service_type">'; // Open your drop down box

        echo '<option value="NULL"></option>';
        // Loop through the query results, outputing the options one by one
        while ($row = mysql_fetch_array($query)) {
         echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
        }
         echo '<option value="Other">Other</option>';
        echo '</select>';// Close your drop down box

when does "`the other option`" get introduced? nothing in the code sample appears to relate to that.. — Sᴀᴍ Onᴇᴌᴀ, Nov 14 '16 at 03:05
@MarkVincentManjac I have never used jQuery, and would have no idea how to start. Is that the only way? — Vlad, Nov 14 '16 at 03:05
@SamOnela the 'other' option, comes from the MySQL database, I just edited the code so it is a separate option — Vlad, Nov 14 '16 at 03:06
I'm not gonna say it is the only way but it will be very easy and effective if you use jQuery. — Mark Vincent Manjac, Nov 14 '16 at 03:11
@MarkVincentManjac not to be a burden, but could you give me an example code on how I would do that, and also, would I need any special requirements to use jQuery? — Vlad, Nov 14 '16 at 03:12

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-21T22:58:45.503

Use javascript, like in the example below. We can add an input field and have it hidden by default, using the style attribute: <input name='otherInput' id='otherInput' type="text" style="display: none" />

var otherInput;
function checkOptions(select) {
  otherInput = document.getElementById('otherInput');
  if (select.options[select.selectedIndex].value == "Other") {
    otherInput.style.display = 'block';
    
  }
  else {
    otherInput.style.display = 'none';
  }
}

<select onchange="checkOptions(this)" name="service_type" id="service_type">
  <option value="NULL"></option>
  <option value="43">43</option>
  <!-- other options from your database query results displayed here -->
  <option value="Other">Other</option>
</select>
<!-- the style attribute here has display none initially, so it will be hidden by default -->
<input name='otherInput' id='otherInput' type="text" style="display: none" />

There are 3rd party libraries like jQuery, AngularJS, PrototypeJS, etc., which can be used to make the code simpler by adding shortcut methods for DOM manipulation (though you should read this post). For example, with jQuery, using .on() (for the event handler binding), .show() and .hide() for the input display toggling, etc:

var otherInput;
var serviceTypeInput = $('#service_type');
serviceTypeInput.on('change', function() {
  otherInput = $('#otherInput');
  if (serviceTypeInput.val() == "Other") {
    otherInput.show();
  } else {
    otherInput.hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_type" id="service_type">
  <option value="NULL"></option>
  <option value="43">43</option>
  <option value="Other">Other</option>
</select>
<input name='otherInput' id='otherInput' type="text" style="display: none" />

The part of the code where there is var, is that JS? And where would I put that in the code? — Vlad, Nov 14 '16 at 03:19
it needs to go into a [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) (i.e. ``) so in PHP you could add that to an echo statement - e.g. `echo " — Sᴀᴍ Onᴇᴌᴀ, Nov 14 '16 at 03:22
to be honest, you so lost me, I tried adding the code and adding an echo before every line with the double quotes and now the php will not work. — Vlad, Nov 14 '16 at 03:31
okay - please take a look at [this phpfiddle example](http://phpfiddle.org/main/code/f44z-f0iy) - hopefully that helps you see the examples in PHP — Sᴀᴍ Onᴇᴌᴀ, Nov 14 '16 at 03:41
can you please check out: http://stackoverflow.com/questions/43551976/dynamic-drop-down-change-input-tag-with-js-and-html. I tried to modify the code I used from you before, but I can not get it to work. Thanks — Vlad, Apr 21 '17 at 22:22

Mark Vincent Manjac · Answer 2 · 2016-11-14T05:13:53.057

0

$(function() {
  $('#sample').change(function() {
    var val = this.value; // get the value of the select.
    if (val == 'other') { // if the value is equal to "other" then append input below the select
      $('html').append('<input type="text" id="inputOther"/>');
    } else { // else then remove the input
      $('#inputOther').remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sample">
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
  <option value="other">other</option>
</select>

edited Nov 14 '16 at 05:13

answered Nov 14 '16 at 03:20

Mark Vincent Manjac

507
1
6
27

I suggest always elaborating on what your code does, and why. Particularly when dealing with someone who has stated that they have no knowledge of jquery – Jon P Nov 14 '16 at 04:18
In addition to what Jon P said, I wouldn't suggest an OP use a library like jQuery unless it was tagged or they specifically asked in the question how to use a library like that (which might get it flagged as off-topic)... – Sᴀᴍ Onᴇᴌᴀ Apr 21 '17 at 22:53

How to have an HTML input field appear when the value 'other' is selected with PHP

2 Answers2

Linked