添加一個新的按鈕點擊和選項來選擇一個選項來顯示文本框

Question

我有這個項目正在努力。第二階段的客戶訂單，訂單必須拆分爲多個訂單。

在每一個新的div，如果單擊添加另一個目按鈕，用戶可以上傳樣本材料，輸入客戶的要求，並回答一個問題，如果他/她有一個可用的風格的代碼，如果是這樣，從選項中選擇並在出現的文本框中輸入代碼，這對每個子訂單都是可能的。

從昨天開始，我就一直在努力，幾乎整整一天。我已經實現了添加子按鈕，它可以工作，但是在每個子順序中，我有一個樣式代碼不會在該子順序中顯示所需的文本框，但僅在第一個子順序中，請不要使用Javascript，我需要幫助解決這個問題，以及如何獲得一系列子命令，並將它們發佈到我的php變量中以提交給數據庫。我認爲name字段必須以某種方式增加javascript，以便唯一標識每個字段，請有人幫助我，完全失去了如何前進。

以下是我的代碼;

<script> 
    function showfield(name){ 
    if(name=='style[]')document.getElementById('div1').innerHTML='<label>Enter Style Code</label><br /> <input type="text" name="style[]" />'; 
    else document.getElementById('div1').innerHTML=''; 
    } 
    $(document).ready(function() { 
     var max_fields  = 10; //maximum input boxes allowed 
     var wrapper   = $(".form-group"); //Fields wrapper 
     var add_button  = $(".add_field_button"); //Add button ID 
     var x = 1; //initlal text box count 
     $(add_button).click(function(e){ //on add input button click 
      e.preventDefault(); 
      if(x < max_fields){ //max input box allowed 
       x++; //text box increment 
       $(wrapper).append('<div style="margin-top:20px; border-top:1px solid #333333;"><label>Upload Sample Material</label><br /><input type="file" name="staff_passport" style="width:200px; height: 40px;" /><br/><br/><label>Customer&#39s Requirement</label><br /><textarea name="cust_requirement" style="width:200px; height: 150px;" /></textarea><br/><br/><label>Do you have a style</label><br /><select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value)"><option value="style[]">I have a style code</option><option value="">I don&#39t have a style code</option></select><div id="div1"></div><br /><a href="#" class="remove_field">Remove</a></div>'); //add input box 
       } 
      }); 
     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 
     }); 
    </script> 

    <form action="orderadd2.php" method="post"> 
     <div class="form-group"> 
     <button class="add_field_button">Add another sub-order</button> 
     <div style="margin-top:20px;"> 
      <label>Upload Sample Material</label><br /> 
      <input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/> 
      <label>Customer's Requirement</label><br /> 
      <textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/> 
      <label>Do you have a style</label><br /> 
      <select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value)"> 
      <option value="">I don't have a style code</option> 
      <option value="style[]">I have a style code</option> 
      </select> 
      <div id="div1"></div> 
     </div> 
     </div> 
     <input type="submit" class="btn btn-lg btn-color btn-block" value="ADD"> 
    </form> 

非常感謝您提前給予的幫助。

Answer 1

我不得不改變你的代碼，你可以做到這一點很容易使用jQuery使用此代碼替換代碼

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    function showfield(name,event){ 

    if(name=='iHaveStyle') { 
    $(event).next('#div1').html('<label>Enter Style Code</label><br /> <input type="text" name="style[]" />'); 
    } else{ 
    $(event).next('#div1').html(''); 
    } 

    } 
    $(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".form-group"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div style="margin-top:20px; border-top:1px solid #333333;"><label>Upload Sample Material</label><br /><input type="file" name="staff_passport[]" style="width:200px; height: 40px;" /><br/><br/><label>Customer&#39s Requirement</label><br /><textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/><label>Do you have a style</label><br /><select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)"><option value="iHaveStyle">I have a style code</option><option value="">I don&#39t have a style code</option></select><div id="div1"></div><br /><a href="#" class="remove_field">Remove</a></div>'); //add input box 
      } 
     }); 
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
    }); 
</script> 

<form action="orderadd2.php" method="post"> 
    <div class="form-group"> 
    <button class="add_field_button">Add another sub-order</button> 
    <div style="margin-top:20px;"> 
     <label>Upload Sample Material</label><br /> 
     <input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/> 
     <label>Customer's Requirement</label><br /> 
     <textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/> 
     <label>Do you have a style</label><br /> 
     <select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)"> 
     <option value="">I don't have a style code</option> 
     <option value="iHaveStyle">I have a style code</option> 
     </select> 
     <div id="div1"></div> 
    </div> 
    </div> 
    <input type="submit" class="btn btn-lg btn-color btn-block" value="ADD"> 
</form>