使用Javascript中的選項添加輸入類型選項

我正在創建訂單表單，我是新編程人員。這個想法是，客戶可以添加新箱子來訂購具有數量的新產品。使用此代碼我可以創建一個包含產品的包裝盒，但是我沒有在產品包裝箱旁放置一個包裝盒。我想爲產品創建一個，爲數量創建另一個，當客戶點擊新產品創建新產品列表和數量列表或數量字段以輸入數值時。我嘗試複製document.create ...並更改div，但我不知道如何指向另一個選擇。我很感謝你們能幫助我。謝謝。使用Javascript中的選項添加輸入類型選項

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

來源

2017-02-04 Evandro

我的建議是，你包的元素，你想克隆一個DIV，並克隆它，當用戶單擊，然後單擊按鈕把它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' />

來源

2017-02-04 05:58:24

我試過這種方式，但沒有工作，所以我改變了一些東西，並完美地工作。非常感謝你，因爲我使用了你的想法。這解決了我的問題。 – Evandro

我不知道，當我把事件處理程序放在按鈕標記中時，它不起作用。所以我把它們放在腳本中，所以你現在可以在這裏試試這個demo ...哈哈。你應該試試jquery，那太棒了。 –

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

謝謝你們，這個網站是驚人的。

來源

2017-02-04 22:02:22 Evandro

:)這個網站很棒，是啊，我在這裏學到很多... –

使用Javascript中的選項添加輸入類型選項

回答

相關問題