PDA

View Full Version : New form fields with JS?



pxlcreations
Oct 22nd, 2009, 01:00 PM
Hi all, I'm new to here and JS but I have question for you! So I have this form with inputs that are considered arrays in my PHP code:


<input type="checkbox" name="1" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="2" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="3" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="4" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="5" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="6" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="7" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="8" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="9" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="10" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="11" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="12" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="13" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="14" /> <input name="ii[]" type="text"> <br />
<input type="checkbox" name="15" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="16" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="17" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="18" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="19" /> <input name="i[]" type="text"> <br />
<input type="checkbox" name="20" /> <input name="i[]" type="text"> <br />

I don't want to keep adding in new spots every time a user want to add a new field. I would like them to be able to press a button that will add another one of those fields and so on. I'm not sure how this can be achieved but that's why I am turning to you! Thanks!

abduraooft
Oct 22nd, 2009, 01:16 PM
You may use DOM methods createElement(), setAttributes(), appendChild() etc to dynamically add html elements. Here is a sample at http://www.codingforums.com/showthread.php?t=132080

pxlcreations
Oct 22nd, 2009, 05:40 PM
Thanks! I will look into that but is there a way to do it in JS? I have no idea how to work DOM.

pxlcreations
Oct 22nd, 2009, 05:58 PM
I actually just found a solution, here's the code that works:


<script language="Javascript" type="text/javascript">
var counter = 1;
var limit = 30;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "<br><input type='checkbox' name=' + (counter + 1) + ' /><input type='text' name='i[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>


<div id="dynamicInput">

<br> <input type="checkbox" name="1" /><input type="text" name="i[]">

</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">