add input type select with options in 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');" />

Z.better · Accepted Answer · 2017-02-04 05:58:24Z

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' />

answered Feb 4, 2017 at 5:58

Z.better

3981 gold badge5 silver badges15 bronze badges

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

2 Comments

Evandro Over a year ago

i tried this way but didn`t work, so i changed some things and worked perfectly. Thank you very much because i used your idea. this solved my problem.

Z.better Over a year ago

I don't know, when I put the event handler in button tag, it doesn't work. so I put them in script,so you can try the demo here now... haha. ps.you should try jquery, that is awesome.

Evandro · Accepted Answer · 2017-02-04 22:02:22Z

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.

Collectives™ on Stack Overflow

add input type select with options in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related