Dat Posted October 5, 2009 Share Posted October 5, 2009 Im trying to dynamically add more fields into my form. HTML: <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5"> <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> <td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td> </tr> <tr> <td></td> <td></td> <td> <input name="entry_id" type="hidden" value="<?php echo $id; ?>"> <input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>"> </td> </tr> </table> Javascript function addInput(divName, type) { var counter = 1; var limit = 50; if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var tr.document.createElement('<tr>'); if(type == 'number') { var newdiv = document.createElement(element); newdiv.innerHTML = '<input size="3" type="text" name="number" />'; document.getElementById(add_input).appendChild(newdiv); } if(type == 'title') { var newdiv = document.createElement(element); newdiv.innerHTML = '<input type="text" name="title[]" />'; document.getElementById(divName).appendChild(newdiv); } counter++; document.getElementById(add_input).appendChild(tr); } } This is one of my first times working with javascript, usually i work with PHP. Im trying to add more input elements of <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> </tr> And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all. Quote Link to comment Share on other sites More sharing options...
Gayner Posted October 5, 2009 Share Posted October 5, 2009 LOL dat from lookatdat.net? This is nick LOL Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted October 5, 2009 Share Posted October 5, 2009 You're kind of shooting yourself in the foot with the way you're trying to go about it. For one, your function has some issues (a counter defined within a function won't persist, add_input is not a variable, etc), and you're trying to do too much inside of it. Let's make it simple: <html> <head> <title>Adding a form input</title> </head> <body> <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5"> <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> <td><input type="button" value="Add another text input"></td> </tr> <tr> <td></td> <td></td> <td> <input name="entry_id" type="hidden" value="<?php echo $id; ?>"> <input class="input submit" type="submit" id="addInput" name="submit" value="Add <?php echo $type; ?>"> </td> </tr> </table> </body> <script type="text/javascript"> var addInput = document.getElementById('addInput'); var count = 1; var limit = 50; addInput.onclick = function(){ if (count == limit){ alert("You have reached the limit of " + limit + " inputs"); return false; } else{ addToForm('add_episodes', 'number'); addToForm('add_episodes', 'title'); ++count; return true; } } function addToForm(divName, type){ // function body goes here } </script> </html> I left the addToForm function body blank because you'll need to rework it a bit to get it to work (you need to figure out exactly what element to append to, as I can't see an add_input element anywhere). This should give you the basic idea, though. Notice that I've added an id of "addInput" to the submit button, and that there's no onclick call within the element itself. I prefer an unobtrusive style of coding, and I find it makes it easier to read and maintain code when it's written like this. YMMV. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.