How to add forms Dynamically with JavaScript

[Neil'o]

I am doing a form requesting the user to choose from a menu bar, a number of people and javascript I have to create textfield just how many the number who choose you.
here we should able to choose the number of children and then are shown in the textfield so many children who are chosen to enter the age of each.
I also call these form as "child1", "child2", "child3" ect ..

how?

[Ackley]

Creating the Form

First we locate the paragraph, which is where we want to position the form. Then we create the form and the select. The next thing I do is to create the onClick event for the select.

mypara=document.getElementById("paraID");

    myform=document.createElement("form");

    myselect = document.createElement("select");

    //one way to write a function... you have to write it yourself!

    myOnChange = new Function("e", "location.href=myselect.options[myselect.selectedIndex].value");

Here you will get the full information about how to create a form with the dynamic content.

[Mecurtis]

Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the script and it is set to 3.

Here I will explain it by the HTML coding:

<script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>
<form method="POST">
     <div id="dynamicInput">
          Entry 1<br><input type="text" name="myInputs[]">
     </div>
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>

When the user clicks on the Add another text input button, the addInput JavaScript function is executed and given the dynamicInput argument which is the name of the div that contains all our text inputs. Here is what our JavaScript function looks like:

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

[pancham]

Your idea is slightly misaligned. with javascript, you need to create things as an object - create the 'div' object, then use appendChild method to attach it where you need it. Then, add an EventListener to your <select> box - that can call a function which looks up the value of the selected entry and deal with it as required.