0

I am learning using the events via "nodes" system. But I always have problems with select and options item. The code is good, it works on my local dev. Unfortunately, I had some bugs in JsFiddle =(

Here is the situation.

We have an input, when I type (3 for exemple) and click to "add", I have two inputs (name + surname) that appears for 3 persons in the div "childrenContainer".

Here is the HTML

<h1>Book</h1>
    <label for="nbEnfants">Number : </label>
    <input type="text" id="nbEnfants">
    <button id="addChildren">Add</button>
    <div id="childrenContainer">

Here is the Javascript

    document.getElementById("addChildren").addEventListener('click',
    function(){
        var nbEnfants = document.getElementById("nbEnfants").value;
        var childrenContainer = document.getElementById("childrenContainer");

        for(var i=0; i<nbEnfants; i++){

            //First added Input
            childrenContainer.appendChild(document.createTextNode("Name : " + (i+1) + " "));
            var input = document.createElement("input");
            childrenContainer.appendChild(input);
            input.setAttribute('type', 'text');
            childrenContainer.appendChild(document.createElement("br"));

            //Second input
            childrenContainer.appendChild(document.createTextNode("Surname : " + (i+1) + " "));
            var input2 = document.createElement("input");
            childrenContainer.appendChild(input2);
            input2.setAttribute('type', 'text');

            childrenContainer.appendChild(document.createElement("br"));
            childrenContainer.appendChild(document.createElement("br"));

        } 
    }
);

This code is good, but I need to add a drop down (select options) for the age of children (1 to 12). Adding inputs is good for me, but adding a select is a little difficult, because I need another loop into this one for adding the age for each children.

I wrote a little idea if it helps you

for(var i = 0; i<12; i++){
                    var select = document.createElement("select");
                    select.setAttribute("name", "selectChildren");
                    select.setAttribute("id", "selectChildren");
                    var option = document.createElement("option");
                    option.setAttribute("value", "value");
                    option.innerHTML = i;
                    select.appendChild(option);
                    childrenContainer.appendChild(document.createElement("br"));
                }

But I don't know how to add a entire drop down after my click event and for each children with his inputs.

I can give you more details if you need help =)

I need explanations if you have a solution, not only the solution, because I will not learn like this =D

Thank you for taking time on my issue =)

Improve this question
4
  • Do you want one select list added for each pair of name/Surname inputs? something like this fiddle? Commented Nov 22, 2016 at 21:54
  • Yes ! Exactly like this ! Can you wait 2 minutes the time I read the code ? I'm very curios, I passed two days to find a solution XD Commented Nov 22, 2016 at 21:56
  • It's a stupid question but I don't understand the parameters of setAttributs of the select. Those are not the same parameters than my inputs in terms of order. Could you explain ? Commented Nov 22, 2016 at 22:01
  • See the updated explanation in my answer Commented Nov 22, 2016 at 22:05

1 Answer 1

Reset to default
2

Use a different iterator for adding options to the select list

Since i is already used to add each set of inputs, use another variable (e.g. var j) when adding options to the select list.

Create the select list, then add options, then add the list to the DOM

When creating a new select list, we want the id attribute to be unique (refer to the MDN documentation as to why it should be unique) - and perhaps the name attribute should be unique too, especially the form is being submitted with traditional methods (e.g. regular form submit, not AJAX)

var select = document.createElement("select");
select.setAttribute("name", "selectChildren");
select.setAttribute("id", "selectChildren" + i);
for (var j = 0; j < 12; j++) {
     var option = document.createElement("option");
     option.setAttribute("value", j+1);
     option.innerHTML = j + 1;
     select.appendChild(option);
}
childrenContainer.appendChild(select); //Add the select list to the DOM

Additionally, you can make the type attribute of the Number input number so it will only allow numbers. If you wanted to only allow a range of integers, you could use a select list for that instead.

 document.getElementById("addChildren").addEventListener('click',
   function() {
     var nbEnfants = document.getElementById("nbEnfants").value;
     var childrenContainer = document.getElementById("childrenContainer");

     for (var i = 0; i < nbEnfants; i++) {

       //First added Input
       childrenContainer.appendChild(document.createTextNode("Name : " + (i + 1) + " "));
       var input = document.createElement("input");
       childrenContainer.appendChild(input);
       input.setAttribute('type', 'text');
       childrenContainer.appendChild(document.createElement("br"));

       //Second input
       childrenContainer.appendChild(document.createTextNode("Surname : " + (i + 1) + " "));
       var input2 = document.createElement("input");
       childrenContainer.appendChild(input2);
       input2.setAttribute('type', 'text');

       childrenContainer.appendChild(document.createElement("br"));
       childrenContainer.appendChild(document.createElement("br"));
       var select = document.createElement("select");
       select.setAttribute("name", "selectChildren");
       select.setAttribute("id", "selectChildren" + i);
       for (var j = 0; j < 12; j++) {
         var option = document.createElement("option");
         option.setAttribute("value", "value");
         option.innerHTML = j + 1;
         select.appendChild(option);
       }
       childrenContainer.appendChild(select);
       childrenContainer.appendChild(document.createElement("br"));

     }
   }
 );
 <h1>Book</h1>
<label for="nbEnfants">Number :</label>
<input type="number" id="nbEnfants">
<button id="addChildren">Add</button>
<div id="childrenContainer">

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I understand !! My day is shining with this answer and the MDN documentation !! Thank you for those details =)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.