ボタンクリックとオプションに新しいdivを追加して、テキストボックスを表示するオプションを選択します

Question

私はこのプロジェクトを進めています。顧客の注文の第2段階では、複数の注文に対して注文を分割する必要があります。

新しいdivごとに、別のサブオーダーの追加ボタンをクリックした場合、ユーザーはサンプルをアップロードして顧客の要件を入力し、使用可能なスタイルコードがあれば質問に回答することができます。表示されるテキストボックスにコードを入力します。これはすべてのサブノードで可能です。

私は昨日からほぼ一日中作業しています。私はサブオーダーの追加ボタンを達成しましたが、それは動作しますが、各サブオーダーでは、スタイルコードは、そのサブオーダーに必要なテキストボックスを表示しませんが、最初のサブオーダーでのみ、Javascriptでうまくいかない、それを修正する方法とサブノードの配列を取得し、それらをPHP変数に投稿してデータベースに提出する方法もあります。私は名前フィールドが何とか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>