How to dynamically create a form using javascript?

Question

Below code adds text-content to the list dynamically,

window.onload = function()
{
    //alert("Window is loaded");

    var numberList = document.getElementById("numberList");


    //for every number between 100 and 200      
    for(var i = 0; i > 100 && i < 200; i++)
    {
        if ( i % 17 == 0 && i % 2 == 0) //if number evenly divisible by 17 and 2
        {
                    //create new li element
            var newNumberListItem = document.createElement("li");

                    //create new text node
            var numberListValue = document.createTextNode(i);

                    //add text node to li element
            newNumberListItem.appendChild(numberListValue);

                    //add new list element built in previous steps to unordered list
                    //called numberList
            numberList.appendChild(newNumberListItem);

        }
    }
}

Now, instead of adding the text content like "i" to list, I want to add a form with one textfield and one submit-button. Thanks in advance.

A Paul · Accepted Answer · 2014-01-01 07:49:52Z

1

Just an example, you can change as per your requirement

Inside script tag

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

var i = document.createElement("input");
i.setAttribute('type',"text");
i.setAttribute('name',"username");

var s = document.createElement("input");
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit");

f.appendChild(i);
f.appendChild(s);

document.getElementsByTagName('body')[0].appendChild(f);

answered Jan 1, 2014 at 7:49

A Paul

8,3113 gold badges33 silver badges65 bronze badges

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

Comments

NiksD · Accepted Answer · 2014-01-01 08:17:46Z

1

try something like this in javascript ...

      /*Form creation*/
      var form = document.createElement("form");
      var input = document.createElement("input");

      form.action = "FileNameHere";
      form.method = "post";

      input.name = "name";
      input.value = "testname";
      form.appendChild(input);

      form.submit();

edited Jan 1, 2014 at 8:17

answered Jan 1, 2014 at 7:55

NiksD

4751 gold badge4 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to dynamically create a form using javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related