SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loop div and all the contents inside

    Hi,

    How can i loop the below div and all the contents inside that according to a variable value ?

    HTML Code:
    <div id="Participentfieldwrap">
    
    
        	First Name : <input type="text"  id=""/> <br />
            Last Name : <input type="text" id=""  /><br />
            Email : <input type="text" id=""  /> 
            
            </div>
    This is my variable

    var NoPrticiField;

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    You want to get the value of all of the input elements contained within the div element?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a form, the fields are in side that form, it will be submitted...

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    That's very nice, but I haven't understood what you are trying to do.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a form for registering contestants based on organization, In it's first step they should select how many contents they have from their organization from a drop down select field, then then will press a "go" button at this stage i will store the number of contestants into a variable (eg: var ContestantNum)that they selected from the drop down list ...In the second step it will be a form like below which they have to fill.
    HTML Code:
    <form>
    <div id="Participentfieldwrap">
    
    
        	First Name : <input type="text"  id=""/> <br />
            Last Name : <input type="text" id=""  /><br />
            Email : <input type="text" id=""  /> 
            
            </div>
    <button value="submit">
    
    </form>

    I need to repeat the "Participentfieldwrap " div and it's fields to the number of contestants they are selected , i have that value already in var ContestantNum


    I Hope this will make you understand

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Yeah, that's much clearer. Thanks.

    You can just clone the div n times, like so:

    Code:
    var participantsField = document.getElementById("Participentfieldwrap),
        form = document.getElementsByTagName("form")[0],
        i;
    
    for(i=0; i<ContestantNum; i++){
      var clone = participantsField.cloneNode(true);
      form.appendChild(clone);
    }
    I'm in a bit of a rush, so I didn't test this.
    If you get stuck, let me know.
    Last edited by Pullo; Feb 18, 2014 at 08:13.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not worked for me , Below is my full code

    HTML Code:
    <body>
    	<script type="text/javascript">
    	var participantsField = document.getElemenById("Participentfieldwrap"),
        form = document.getElementsByTagName("form")[0],
    	
        i;
    var ContestantNum = "4";
    
    for(i=0; i<4; i++){
      var clone = participantsField.cloneNode(true);
      form.appendChild(clone);
    }
    	</script>
        <form>
    	<div id="Participentfieldwrap">
        	First Name : <input type="text"  id=""/> <br />
            Last Name : <input type="text" id=""  /><br />
            Email : <input type="text" id=""  /> 
            
            </div>        
            </form>
        
    </body>

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Put the JS below the HTML (otherwise you are trying to reference elements that don't yet exist).

    Code:
    <body>
      <form>
        <div id="Participentfieldwrap">
          First Name : <input type="text"  id=""/> <br />
          Last Name : <input type="text" id=""  /><br />
          Email : <input type="text" id=""  /> 
        </div>        
      </form>
    
      <script type="text/javascript">
        var participantsField = document.getElementById("Participentfieldwrap"),
            form = document.getElementsByTagName("form")[0],
            ContestantNum = 4,
            i;
        for(i=0; i<ContestantNum; i++){
          var clone = participantsField.cloneNode(true);
          form.appendChild(clone);
        }
      </script>
    </body>
    Also, I have turned ContestantNum into an integer.
    If it needs to be a string, use Number() to convert it.

    Edit:

    I also had a typo in the code (getElemen - forgot the 's')
    Fixed now.


Tags for this Thread

Bookmarks

Posting Permissions

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