在Javascript中添加带有选项的输入类型选择

Question

I am creating a order form and i am new programming. the idea is that the customer can add new box to order a new product with the quantity. with this code i can create a box with products but i didn't get to put a quantity box beside of the product box. I would like to create one for the products and another one for quantity and when the customer click on New Product create a new product list and a quantity list or a quantity field to enter the value. I tryed copie the document.create... and change the div, but i don`t know how to direct to another choices. I appreciate if you guys can help-me. Thank you.

JavaScript

 var choices = [
    "Product1",
    "Product2",
    "Product3"];

function addInput(divName) {


    var newDiv = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
    selectHTML += "</select>";
    newDiv.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(newDiv);


    var Div = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
    selectHTML += "</select>";
    Div.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(Div);

HTML

    <form class="new" method="post" action="phppage">

    <fieldset id="products">  <legend> PRODUCTS </legend>

        <select name="tProduct" id="cProduct">
            <optgroup label="GALLON BAG">
                <option>Product1</option>
                <option>Product2</option>
                <option>Product3</option>
                </optgroup>
            </select>
        &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>


        <div id="dynamicInput"></div>
        <input type="button" value="New Product" onclick="addInput('dynamicInput');" />

Answer 1

My suggest is that you wrap the element you wanna clone in a div, and clone it when user click the button then put it under dynamicInput

 function addInput(divName) { var copy = document.getElementById('forclone').cloneNode(true); document.getElementById(divName).appendChild(copy); } document.getElementById('button').onclick = function(){ addInput('dynamicInput'); } 

  <form class="new" method="post" action="phppage"> <fieldset id="products"> <legend> PRODUCTS </legend> <div id = 'forclone'> <select name="tProduct" id="cProduct"> <optgroup label="GALLON BAG"> <option>Product1</option> <option>Product2</option> <option>Product3</option> </optgroup> </select> &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/> </div> <div id="dynamicInput"></div> <input type="button" value="New Product" id = 'button' /> 

Answer 2

i would like to say thank you to Z.better because i used the idea that he posted so solve this problem i only made some changes. Follow below the script that worked with me. I am using now. I am sharing this because if someone have this doubt this is the solution.

    <script>
    function addInput(divName) {
        var copy = document.getElementById('forclone').cloneNode(true);
        document.getElementById(divName).appendChild(copy);
    }

</script>

and

    <form class="new" method="post" action="phppage">

    <fieldset id="products">  <legend> PRODUCTS </legend>
        <div id = 'forclone'>
            <select name="tProduct" id="cProduct">
                <optgroup label="GALLON BAG">
                    <option>Product1</option>
                    <option>Product2</option>
                    <option>Product3</option>
                </optgroup>
            </select>

            &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
        </div>



        <div id="dynamicInput"></div>
        <input type="button" value="New Product" onclick="addInput('dynamicInput');" />

Thank you guys, this website is amazing.