How to create dynamic select options with different input fields?

Question

If option 1 is selected, two buttons should appear. If option 2 is selected, one button and one input field should appear. If option 3 is selected, two input fields should appear. With this code, nothing is changing.

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript">
    function vidType() {
      var s1 = document.getElementById(select1);
      if (s1.value == "Video File") {
        var btn1 = document.createElement("BUTTON");
        var t = document.createTextNode("UPLOAD IMAGE");
        btn1.appendChild(t);
        var btn2 = document.createElement("BUTTON");
        var t2 = document.createTextNode("UPLOAD VIDEO");
        btn2.appendChild(t2);
      } else if (s1.value == "Youtube Video") {
        var btn3 = document.createElement("BUTTON");
        var t3 = document.createTextNode("UPLOAD IMAGE");
        btn3.appendChild(t3);
        var x = document.createElement("INPUT");
        x.setAttribute("type", "text");
        x.setAttribute("value", "Paste URL here");
        document.body.appendChild(x);
      } else if (s1.value == "Other Video") {
        var y = document.createElement("INPUT");
        y.setAttribute("type", "text");
        y.setAttribute("value", "Paste URL of the Video");
        document.body.appendChild(y);
        var z = document.createElement("INPUT");
        z.setAttribute("type", "text");
        z.setAttribute("value", "Paste thumbnail URL here");
        document.body.appendChild(z);
      }
    }
  </script>
</head>

<body>
  Choose Video Type:
  <select id="select1" name="select1" onchange="vidType()">
    <option value="Select Type">Select Video Type</option>
    <option value="Video File">Video File</option>
    <option value="Youtube Video">Youtube Video</option>
    <option value="Other Video">Other Video</option>
    </select>
</body>

</html>

If you open your console (F12), you'll see why it isn't working. — adeneo
– adeneo, Commented Aug 7, 2017 at 19:55
but now every time I select an option it's showing one input field but when I'm selecting another option or that option it's generating one more time the same thing.... same thing is generating until I refresh the page... — user6691112
– user6691112, Commented Aug 7, 2017 at 20:02

ihpar · Accepted Answer · 2017-08-07 20:06:33Z

1

Only problem seems to be with this line

var s1 = document.getElementById(select1);

If you change it to

var s1 = document.getElementById("select1");

it will work. The reason it doesn't work is element id's should be passed as strings, i.e. enclosed in single or double quotes.

answered Aug 7, 2017 at 20:06

ihpar

6764 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create dynamic select options with different input fields?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related