Dynamic Drop down change input tag with JS and HTML

Question

Is there a way to have an HTML input element show based on the value of a select list/drop-down in HTML? So once one of the drop-down values is selected, then another input tag pops up. What I am looking for is to have another input tag pop up once one of the values are select, and based on the select value, it would be a certain type of input type tag.

I have been able to do it with having an input tag show and hide if a certain value is selected, so then I can use it with PHP in a form tag , but I can not seem to figure out how to get something like this to work. Here is the logic I am trying to accomplish:

if dropdown value is 'playswound'
    then show input tag type=file
if dropdown value is 'saythis'
    then show input tag type=text
if dropdown value is 'runcommand'
    then show input tag type=text
if dropdown value is 'run program'
    then show input tag type=file

Here is the HTML I have so far:

$default_select="Default Action";

echo "<select name='alarm_action' required>";
echo    "<option value=$default_select>$default_select</option>";
echo    "<option value='/usr/bin/mpg123'>Play Sound</option>";
echo    "<option value=''>Say This</option>";
echo    "<option value=''>Run Command</option>";
echo    "<option value=''>Run Program</option>option>";
echo "</select>";

?>

Here is the JS code I got to work for one option for a dropdown:

    $scriptTag = "
        var speakerInput = $('#speaker');
        speakerInput.on('change', function() {
        speaker_other = $('#speaker_other');
        if (speakerInput.val() == 'Other') {
                speaker_other.show();
        } else {
             speaker_other.hide();
         }
    });";

HTML for JS above:

        echo '<option value="Other">Other</option>';

        echo '</select>';// Close your drop down box
        echo '<input name="speaker_other" id="speaker_other" type="text" style="display: none" />';
        echo '<script type="text/javascript">'.$scriptTag.'</script>';

so now I want to be able to have it where every option selected will have an input tag show, but based on the selected value, the input type would be different.

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-22T00:33:08.720

This can be achieved with a few changes:

Add an id value to the <select> tag e.g. <select id="alarm_action" name="alarm_action">

Use that id value to find the select list - instead of

var speakerInput = $('#speaker')

use

var alarmInput = $('#alarm_action');

Add a file input with a specific id to the HTML, presumably after the text input with id speaker_other (e.g. <input type="file" id="file_input">)
Use that id to select the file input in the change handler (var file_input = $('#file_input');
Use a switch statement to handle the various cases of values instead of the if statement, since there are multiple option values to consider. Then in various cases (of the switch statement), the file input will be hidden and the text input will be shown, or vice-versa.
```
switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
         //show file input, hide text input
         break;
    case 'saythis':
    case 'runcommand':
         //show file input, hide text input
         break;
}
```

See these changes combined in the snippet below. Also note these other changes:

the sound option was updated so the value attribute is 'playsound' and the file path will be in a different attribute (i.e. data-file)
the invalid HTML of the last option was corrected from <option value=''>Run Program</option>option> to <option value=''>Run Program</option>

var alarmInput = $('#alarm_action');
alarmInput.on('change', function() {
  var speaker_other = $('#speaker_other');
  var file_input = $('#file_input');
  //this == alarmInput within this change handler
  switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
      speaker_other.hide();
      file_input.show();
      break;
    case 'saythis':
    case 'runcommand':
      speaker_other.show();
      file_input.hide();
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='alarm_action' id="alarm_action" required>
    <option value="">Default Action</option>
    <option value='playsound' data-file='/usr/bin/mpg123'>Play Sound</option>
    <option value='saythis'>Say This</option>
    <option value='runcommand'>Run Command</option>
    <option value='runprogram'>Run Program</option></select>
<input name="speaker_other" id="speaker_other" type="text" style="display: none" />
<input id="file_input" type="file" style="display: none" />

UPDATE:

This could actually be simplified, to use only a single input and just change the type attribute on it:

var alarmInput = $('#alarm_action');
alarmInput.on('change', function() {
  var speaker_other = $('#speaker_other');
  speaker_other.show();
  switch ($(this).val()) {
    case 'playsound':
    case 'runprogram':
      speaker_other.attr('type', 'file');
      break;
    case 'saythis':
    case 'runcommand':
      speaker_other.attr('type', 'text');
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='alarm_action' id="alarm_action" required>
    <option value="">Default Action</option>
    <option value='playsound' data-file='/usr/bin/mpg123'>Play Sound</option>
    <option value='saythis'>Say This</option>
    <option value='runcommand'>Run Command</option>
    <option value='runprogram'>Run Program</option></select>
<input name="speaker_other" id="speaker_other" type="text" style="display: none" />

Nice I like it, I was working in doing nested if statements, but I like this idea, cleaner. Once again thank you for the save!!! — Vlad, Apr 22 '17 at 00:19
Just Once in the page... can be either in the `` or in the `` (better for page load) as long as it comes before the inline (other/your) scripts - read more about this topic in [this answer](http://stackoverflow.com/a/24070373/1575353) — Sᴀᴍ Onᴇᴌᴀ, Apr 22 '17 at 00:26
I got it thank you =), btw what was the last edit you did? What did you change? — Vlad, Apr 22 '17 at 00:35
I expanded the part about selecting the list by Id- second bullet — Sᴀᴍ Onᴇᴌᴀ, Apr 22 '17 at 00:38

Peter · Answer 2 · 2017-04-21T21:45:18.823

0

Here is a solution to your question:

<head>
  <style>
    input{
      display:none;
    }
  </style>
</head>
<body>
    <select id="dropdown">
      <option value="">Select a type...</option>
      <option value="text">Text</option>
      <option value="number">Number</option>
      <option value="url">URL</option>
    </select>
    <script>
    $( "#dropdown" ).on( "change", function() {
        var type = $(this).val();
      $('input').hide();
      if(type !== ''){      
        $('input[type="'+type+'"]').show();
      }
    });
    </script>
<body>

jsfiddle: https://jsfiddle.net/kt8wLx2y/4/

edited Apr 21 '17 at 21:45

answered Apr 21 '17 at 21:17

Peter

748
6
20

Thank you, but what I am looking for is to have another input tag pop up once one of the values are select, and based on the select value, it would be a certain type of input type tag. – Vlad Apr 21 '17 at 21:21
The code does not work, I change the option but no input tag pops up – Vlad Apr 21 '17 at 21:42
Try the jsfiddle link again – Peter Apr 21 '17 at 21:45
Okay, I got it to mostly, work, but I can not seem to get the to work – Vlad Apr 21 '17 at 21:56
I provided an example not a whole solution. This site is for help, not for free job :) If you look at the code you can edit it with additional fields – Peter Apr 21 '17 at 21:59
So I got the file to work by changing the – Vlad Apr 21 '17 at 22:02
In your question you are talking about HTML and JS, now you are talking about PHP. That is an another question.. We can't discuss here that part of your question. Please accept my answer or close the question – Peter Apr 21 '17 at 22:05
1

I am trying to understand your code so I can get it to work with the HTML and PHP – Vlad Apr 21 '17 at 22:06
Here is an issue my, , does not show up do to the code input{display:none; } – Vlad Apr 21 '17 at 22:10
Vlad, please this is not relevant, read about CSS, close this question, thank you – Peter Apr 21 '17 at 22:13

Dynamic Drop down change input tag with JS and HTML

2 Answers2

UPDATE:

Linked