SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    43
    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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 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
    43
    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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 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
    43
    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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 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.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    43
    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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 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
  •