入力タイプをJavascriptのオプションで選択してください。

Question

私はオーダーフォームを作成しています。私は新しいプログラミングです。顧客は新しい箱を追加して数量の新しい商品を注文することができます。このコードでは、製品を含むボックスを作成できますが、製品ボックスの横に数量ボックスを置くことはできませんでした。私は製品用のものと数量用のものを作成したいと思います。顧客が新製品をクリックすると、新しい製品リストと数量リストまたは数量フィールドを作成して値を入力します。 私は、document.createをコピーしてdivを変更しましたが、別の選択肢に移動する方法はわかりません。皆さんが助けてくれればと感謝します。ありがとうございました。

は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

私のお勧めは、あなたがしてdynamicInput

下に置くDIVであなたにしたいクローンを要素をラップし、ユーザーがボタンをクリックしたときに、それを複製していることです

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

Z.betterに感謝したいと思います。彼が投稿したというアイデアを使用したので、私はこの問題を解決しました。私と一緒に働いたスクリプトの下に従ってください。私は今使用しています。私はこれを共有しています。誰かがこの疑問を持っているなら、これが解決策です。

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

</script> 

と

<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');" /> 

このウェブサイトは素晴らしいです、皆さんありがとうございました。