Click here to Skip to main content
13,598,498 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I am using a javascript jquery plugin that creates a select box and an input box. I have it inside a for loop which replicates the select and input box for the amount of times it iterates. What I am trying to do is while it is in the loop for each time the select and input box get created it gets thrown inside a div with a unique id of course.

Below is my explanation and where I am currently at appreciate any help.

What I have tried:

for(i=0; i<Qty; i++)
{
   var newDiv = document.createElement('div'); //created the div for each iteration
   newDiv.id = 'd'+ i; //created a div id for each iteration 
   newDiv.className = 'myClass'; //created a class
   form.render();//this function creates the select box and input box
   /*I am stuck here not exactly sure how I am suppose to take the form.render()
        and place it into the created div.*/

}
Posted 9-Nov-17 4:07am
Updated 9-Nov-17 7:16am
Comments
F-ES Sitecore 9-Nov-17 10:13am
   
So you want people to help you use a function you haven't shown the code for or explained how it works?

Look into using Clone, it's probably easier than what you're doing.
9-Nov-17 10:19am
   
Hello I will investigate the clone but even if I wrote the code to create the input and select box I will still be stuck in the same situation in which two boxes are created but not placed into div.
F-ES Sitecore 9-Nov-17 10:22am
   
You would use "append" or similar. The link I gave has examples of this, and most examples you find that use clone with show something similar as you always need to put the element *somewhere* after cloning it.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

refer this sample

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .myClass{
            width:500px;
            border:1px solid red;
            padding:5px;
        }
        
    </style>
    <title></title>
    
</head>
<body>
    <script>
        var Qty = 5;
        for (i = 0; i < Qty; i++) {
            debugger
            var newDiv = document.createElement('div');
            document.body.appendChild(newDiv);
            newDiv.id = 'd' + i;
            newDiv.className = 'myClass';
            var input = document.createElement('input');
            input.type = "text";
            input.id = "txt" + i;
            newDiv.appendChild(input);
             

            var select = document.createElement("select");
            select.id = "select" + i;
            newDiv.appendChild(select); 
            var items = ["option1", "option2", "option3"];
            for (var j = 0; j < items.length; j++) {
                var option = document.createElement("option");
                option.value = items[j];
                option.text = items[j];
                select.appendChild(option);
            }

        }
    </script>

</body>
</html>


Demo Plunker[^]
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.180621.3 | Last Updated 9 Nov 2017
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100