Member Avatar for Nilgems

Using javascript, I want generate buttons and textboxes dynamically depending on selection from dropdown.
Use asp.net with c# languasge.
I will try using above code.But not solved the purpose.Please suggest.

<head runat="server">
    <title>Dynamically add Text Box and Button</title>
    <script language="javascript" type="text/javascript">
    function add(type)
    {
    for(i=0;i<10;i++)
    {
    var element=document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
    
    var foo=document.getElementById("fooBar");
    foo.appendChild(element ,"<\br>");
           
    }
    }
    </script>
</head>

<body>
    <form id="form1" runat="server">
 <h2>Dynamically add element in form </h2>
 Select the element and hit Add to add it in form. 
 <br />
 <select name="element">
     <option value="button">Button</option>
     <option value=" ">TextBox</option>
 </select>
 
 <input type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
 <br />
 <span id="fooBar"></span>
    <div>
    
    </div>
    </form>
</body>
  • 2 Contributors
  • 1 Reply
  • 241 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for fxm

This is one guess at what you are trying to do

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title>
      Dynamically add Text Box and Button
    </title>
    <script language="javascript" type="text/javascript">
        _ctr=0;
        function addEl(typ) {
            if (_ctr < 15) {
                var el = document.createElement("input");
                el.setAttribute("type", typ);
                el.setAttribute("value", typ + _ctr);
                el.setAttribute("name", typ + _ctr++);

                var foo = document.getElementById("fooBar");
                foo.appendChild(document.createElement("br"));
                foo.appendChild(el);
            }
        }
    </script>
  </head>
  <body>
    <form id="form1" name="form1">
      <h2>
        Dynamically add element in form
      </h2>Select the element and hit Add to add it in form.<br>
      <select name="elem">
        <option value="button">
          Button
        </option>
        <option value="text">
          TextBox
        </option>
      </select> 
      <input type="button" value="Add" onclick="addEl(document.forms[0].elem.value)">
    <div id="fooBar"></div>
    </form>
  </body>
</html>

The runat="server" part is up to you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.