Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could use an <code>onclick</code> event handler in order to get the input value for the text field. Make sure you give the field an unique <code>id</code> attribute so you can refer to it safely through <code>document.getElementById()</code>: </p> <p>If you want to dynamically add elements, you should have a container where to place them. For instance, a <code>&lt;div id="container"&gt;</code>. Create new elements by means of <code>document.createElement()</code>, and use <code>appendChild()</code> to append each of them to the container. You might be interested in outputting a meaningful <code>name</code> attribute (e.g. <code>name="member"+i</code> for each of the dynamically generated <code>&lt;input&gt;</code>s if they are to be submitted in a form.</p> <p>Notice you could also create <code>&lt;br/&gt;</code> elements with <code>document.createElement('br')</code>. If you want to just output some text, you can use <code>document.createTextNode()</code> instead.</p> <p>Also, if you want to clear the container every time it is about to be populated, you could use <code>hasChildNodes()</code> and <code>removeChild()</code> together.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type='text/javascript'&gt; function addFields(){ // Number of inputs to create var number = document.getElementById("member").value; // Container &lt;div&gt; where dynamic content will be placed var container = document.getElementById("container"); // Clear previous contents of the container while (container.hasChildNodes()) { container.removeChild(container.lastChild); } for (i=0;i&lt;number;i++){ // Append a node with a random text container.appendChild(document.createTextNode("Member " + (i+1))); // Create an &lt;input&gt; element, set its type and name attributes var input = document.createElement("input"); input.type = "text"; input.name = "member" + i; container.appendChild(input); // Append a line break container.appendChild(document.createElement("br")); } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="text" id="member" name="member" value=""&gt;Number of members: (max. 10)&lt;br /&gt; &lt;a href="#" id="filldetails" onclick="addFields()"&gt;Fill Details&lt;/a&gt; &lt;div id="container"/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>See a working sample in this <a href="http://jsfiddle.net/t656N/1/" rel="noreferrer">JSFiddle</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload