Hi I am currently looking into creating a dynamic form using javascript. The form is going to expand depending on the selection made in a drop down menu. The following is a typical start off point. <body> <form action="add_new_question.php" method="POST" id="form" enctype="application/x-www-form-urlencoded"><table> <tr><td>Please select your sex</td><td><select id="select" name="select[]" onchange='do_request()')><option value="" ></option><option value="male" >Male</option><option value="female" >Female</option></select></td></tr> <tr id="submit"><td><input type="submit" name="submit" value="submit" /></td><td></td></tr></table></form> </body> Code (markup): I of course call the do_request function when the pull down menu is changed. How would I then go about to add the new content to just before the last <tr> within the form (the data I am placing in is going to be pre formatted). I did try adding span and div but this created invalid html and so did not work. Any help would be appreciated.
Below is a sample of creating a table using createElement method. <script> function makeTable() { var ourDiv=document.getElementById('tableTest'); var t=document.createElement('table'); // - start by creating the table element var tb=document.createElement('tbody'); // - create a tbody element // - !! YOU MUST INCLUDE THE TBODY TAG FOR THIS EXAMPLE TO WORK IN WIN IE5+ !! t.style.border='2px ridge'; t.style.width='200px'; var tr=document.createElement('tr'); // - now create the tr and td elements var td=document.createElement('td'); td.style.textAlign='right'; td.style.padding='5px'; var tdText=document.createTextNode('This is the text node'); // - create the text that will go in the table cell // - Now start building the table. It's like filling a big container with successively smaller ones, just in reverse td.appendChild(tdText); // - put the text node in the table cell tr.appendChild(td); // - put the cell into the row tb.appendChild(tr); // - put the row into the tbody t.appendChild(tb); // - put the tbody into the table ourDiv.appendChild(t); // - put the table into the div } </script> Code (markup):