Loop div and all the contents inside

JavaScript
1

Hi,

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

<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

You want to get the value of all of the input elements contained within the div element?

3

It’s a form, the fields are in side that form, it will be submitted…

4

That’s very nice, but I haven’t understood what you are trying to do.

5

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.


<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

Yeah, that’s much clearer. Thanks.

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

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

It’s not worked for me :(, Below is my full 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

Put the JS below the HTML (otherwise you are trying to reference elements that don’t yet exist).

<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.[/edit]