CODEWITHSUNDEEP
javascripthtml
R11G
R11G

Reputation: 1970

How to create different number of input text fields for different options in the drop down menu?

This is what I am trying to achieve -

Here is where I am struggling -

HTML Code -

<body>


          <p>
            <select name="Select Flow" id="Flow" >          
              <option id="option0" value="https://fusion.paypal.com">Send Money</option>
              <option id="option1" value="option1">optionA</option>
              <option id="option2" value="option2">OptionB</option>
              <option id="option3" value="option3">C</option>
              <option id="option4" value="option4">D</option>
              <option id="option5">E</option>
              <option id="option6">F</option>
              <option id="option7">G</option>
              <option id="option8" value="option8">H</option>           
            </select>
          </p>
          <p>
            <input type="submit" name="Submit" id="Submit" value="Submit" onclick="myfunc()"action="" />
          </p>
</body>

JS-

function myfunc()
{
var value="F";
var t = document.getElementById("Flow");
alert((t.options.length).innnerHTML);
for(var i=0; i<t.options.length;i++)
{
    if(t.options[i].text == value)
    {
        t.selectedIndex = i;
        alert(t.selectedIndex.innerHTML);
    }
}
}

Upvotes: 0

Views: 379

Answers (1)

souvickcse
souvickcse

Reputation: 7804

This code can help you

<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(name,job)
{
alert(document.getElementById("Flow").value);
write = document.getElementById('textfeilds');
for(i=0;i<document.getElementById("Flow").value;i++)
{
 write.innerHTML += '<input type="text">';
}
}
</script>
  <p>
        <select name="Select Flow" id="Flow" >          
          <option id="option0" value="4">Send Money</option>
          <option id="option1" value="1">optionA</option>
          <option id="option2" value="2">OptionB</option>
          <option id="option3" value="3">C</option>
          <option id="option4" value="4">D</option>
          <option id="option5" value="5">E</option>
          <option id="option6" value="6">F</option>
          <option id="option7" value="7">G</option>
          <option id="option8" value="8">H</option>           
        </select>
      </p>
      <p>
        <input type="submit" name="Submit" id="Submit" value="Submit" onclick="myFunction()"action="" />
      </p>

<div id="textfeilds"></div>
</body>
</html>

Upvotes: 1

Related Questions