CODEWITHSUNDEEP
javascriptjqueryhtmlformsdropdown
Vlad
Vlad

Reputation: 145

Dynamic Drop down change input tag with JS and HTML

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.

Upvotes: 0

Views: 4675

Answers (2)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

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" />

Upvotes: 1

Peter
Peter

Reputation: 741

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/

Upvotes: 0

Related Questions