StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PONeed Help Creating Form Elements Based On Click via JavaScript and JQuery
text
Body
copied!<p>I'm pretty new to web programming and I am trying to simply add text fields to a certain form based upon clicking a previous text field. The html page will start with one field and will grow with text fields based upon clicking any previous field. This is via client-side JavaScript.</p> <p>However, it seems like the code isn't working and I'm not getting anywhere. All that shows up is one text field regulated by the HTML and the click event is outputting anything. You can ignore the styling for right now.</p> <pre><code><!DOCTYPE html> <html> <title>This is just a test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> $(document).ready(function(){ var inival = 0; function addTextBox() { var newArea = add_New_Element(); var htcontents = "<input type='text' name='textbx[]'/>"; document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' } function add_New_Element() { inival=inival+1; // Increment element number by 1 var ni = document.getElementById('area'); var newdiv = document.createElement('div'); // Create dynamic element var divIdName = 'my'+inival+'Div'; newdiv.setAttribute('id',divIdName); ni.appendChild(newdiv); return divIdName; } $("input").click(function(){ addTextBox(); }); }); </script> <body> <div> <form id="mainform" action="execute.php" method="post"> <input type="text" name="textbx[]"/> </form> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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