Creating Form dynamically with Javascript

Question

I tried writting a function which receives an input from the user as to how many field to create in a form. Then the function creates a Form which contains number(equivalent to user input) of textboxes and one submit button. I wrote the function but it doesnt seem to be working where have i gone wrong. I would be grateful if any one can help me. My code:

function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }

here is the HTML part

<body>
<input type="textbox" name="value_box" id="uValue" ></input>
<input type="button" onclick="javascript:createTextBox()" value="Click"></input>
<div id="pop"></div>
</body>

Thanks in Advance :D

when i run it its not working i dont know why its not working. :( — Chakra
– Chakra, Commented Jul 22, 2012 at 17:40
Are you sure val is a number? Maybe it is a string like "5" instead of 5. Try var val = + document.getElementById('uValue').value — Azder
– Azder, Commented Jul 22, 2012 at 17:42
at the beginning i just created the Textboxes when the user gave the input value. it worked and after that i tried creating the Form and a Submit button... and it stopped working. Nothing happens when i enter any value in the input textbox field. — Chakra
– Chakra, Commented Jul 22, 2012 at 17:43
Also, use console.log() when running the script so you know what actually happens, and give us more info. — Azder
– Azder, Commented Jul 22, 2012 at 17:43

Clyde Lobo · Accepted Answer · 2012-07-22 17:57:58Z

To begin with input types are standalone tag.

Change your HTML to

<input type="textbox" name="value_box" id="uValue" />
<input type="button" onclick="javascript:createTextBox()" value="Click"/>
<div id="pop"></div>

Also made changes to the js

function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }

Darcey · Accepted Answer · 2012-07-22 17:48:19Z

An alternate method for you:

    <script>
      function generateForm()
      {
        $FormHTML = "";
        $fieldCount = document.getElementById("fieldsCount").value;
        console.log($fieldCount);
        for ($i = 1; $i <= $fieldCount; $i++)
        {
          $FormHTML += "<div><b>Form input " + $i + ":</b><br><input type='text' id='element" + $i + "' name='element" + $i + "' style='width:200px;'/></div>\n";
        }
        document.getElementById("FieldsContainer").innerHTML = $FormHTML;
      }
    </script>

    <form>
      <select id="fieldsCount" name="fieldsCount" onChange="generateForm()">
        <option value="0">Please choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="5">5</option>
        <option value="10">10</option>
      </select>
      <div id="FieldsContainer"></div>
    </form>

jeff · Accepted Answer · 2012-07-22 19:09:58Z

0

You have two typos in your code. This:

candidateFomr.action="process.php";

Should be this:

candidateForm.action="process.php";

And this:

box.appendChild(candiateForm);

Should be this:

box.appendChild(candidateForm);

I tested the code with the typos corrected and it worked.

To make the textboxes displayed vertically, you can add a br element after each one:

for(var i=0; i<val;i++)
{
    var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
    newTextbox.type="textbox";
    newTextbox.name="candidate[]";
    newTextbox.id="candidateId";

    candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form
    var brElement = document.createElement("br");
    candidateForm.appendChild(brElement);

}

Edit: You mean like this?

for(var i=0; i<val;i++)
{
    var lblElement = document.createElement("label");
    lblElement.innerHTML = "Label " + (i+1) + " ";
    candidateForm.appendChild(lblElement);
    var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
    newTextbox.type="textbox";
    newTextbox.name="candidate[]";
    newTextbox.id="candidateId";

    candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form
    var brElement = document.createElement("br");
    candidateForm.appendChild(brElement);

}

edited Jul 22, 2012 at 19:09

answered Jul 22, 2012 at 17:45

jeff

8,3582 gold badges34 silver badges43 bronze badges

4 Comments

Chakra Over a year ago

Jeff .. can u help me little bit. When my textboxes in my Form are being displayed its is displayed in Horizontal way can we make it vertically. can u help me with that too.. ???

Chakra Over a year ago

Hey Jeff , sorry to bother u again. actually i was trying to use LABEL element infront of each textbox that is being poped. i not able to do so .. is there a way we can achieve that????

Chakra Over a year ago

yes bro that is what i meant .. u r a saviour... thanks buddy :D

jeff Over a year ago

Haha, no problem... and if you have more questions related to this, don't hesitate to ask.

Collectives™ on Stack Overflow

Creating Form dynamically with Javascript

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related