Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post

    New form fields with JS?

    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:

    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!

  2. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    15,060
    Thanks
    165
    Thanked 2,250 Times in 2,237 Posts
    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

  3. #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    Thanks! I will look into that but is there a way to do it in JS? I have no idea how to work DOM.

  4. #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    177
    Thanks
    20
    Thanked 2 Times in 1 Post
    I actually just found a solution, here's the code that works:

    Code:
    <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>
    Code:
    <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');">


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •