動的に注入されたフォームフィールドがフォームが必要とされているすべてのparamsに提出されますフォームの送信

Question

<%= simple_form_for @product, method: :post, url: save_item_path do |f| %> 
    <tr> 
     <td> 
      Category 
     </td> 
     <td> 
      <%= f.input :category_id, collection: Category.all, label: false, prompt: 'Select your category', required: true ,required: true %> 
     </td> 
    </tr> 

    <div class="row " style="height:100px;width:100%"> 
     <div class="col-md-5 sub-cat-dropdown"> 
      <select class="select required sub-cat" required="required" name="product[sub_id]"><option value="">Select your sub category</option><option value="15">Bottle</option><option value="16">Charger</option></select> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-3 col-md-offset-5"> 
      <%= f.submit :submit %> 
     </div> 
    </div> 

<% end %>  

ながら提出されていません...ここのparams上記ハッシュでのparams

{"utf8"=>"✓", "authenticity_token"=>"4gY7lWgSqo6j4UoZ78iv1nsaMq9TUXLXE2oQzlqqyh3I3oED3CxwM04cB1n5P+Nz81O3Vvk+/NDPxixNey/J9Q==", "product"=>{"name"=>"vamsi", "price"=>"456", "availability"=>"true", "about"=>"aerg", "ref"=>"456", "texture"=>"rdgg", "shipping"=>"ewataewrg", "category_id"=>"13", "notes"=>"feartg", "packaging"=>"wer5tyy", "sub_id"=>"15"}, "commit"=>"submit", "controller"=>"items", "action"=>"create"} 

である、あなたはsub_idはでき提出される。

ただし、メインカテゴリの選択に基づいて、サブカテゴリのドロップダウンを動的に生成する必要があります。

だからサブ猫のドロップダウンdivがメインカテゴリ]ドロップダウンのクリック時に、私はサブ猫のドロップダウン内のselectタグを注入しようとしています。この

<div class="row " style="height:100px;width:100%"> 
     <div class="col-md-5 sub-cat-dropdown"> 

     </div> 
</div> 

のように空にされ

ここでは、サブ猫のドロップダウン内..私はそれを選択し、ドロップダウンを挿入することになっているされないコード上で何

$(document).ready(function(){ 

    //this function is supposed to create a dropdown of sub category 
    //based on the main category dropdown 

    $('#product_category_id').on('change', function(){ 

     var values = []; 
     var inner_contents = []; 

     if(this.value === undefined){ 
      return; 
     }else{ 
      $main_category = this.value; 
      $main_category_length = $cat_obj[$main_category].length; 
      for (var i=0;i<$main_category_length;i++){ 
       values.push($cat_obj[$main_category][i].id); 
       inner_contents.push($cat_obj[$main_category][i].name); 
      } 

      $('.sub-cat-dropdown').empty(); 
      inject_sub_category(values, inner_contents); 
     } 

    }); 



    // this function injects a dropdown of sub categories, just below the categories ... 


    function inject_sub_category(value_array, inner_html_array){ 

     var select = document.createElement("select"); 
     select.setAttribute("class","select required sub-cat"); 
     select.setAttribute("required","required"); 
     select.setAttribute("name","sub_id"); 

     // the above will create this 
     // <select class ="select required form-control" 
     //     required = "required"  
     //     name = "product[sub_id]" 
     //     id = "sub_cat_id"> 
     // </select>    

     $('.sub-cat-dropdown').append(select); 


     // setting the default option 

     var default_option = document.createElement("option"); 
     default_option.setAttribute("value","") 
     default_option.innerHTML = default_option.innerHTML + "Select your sub category"; 
     select.appendChild(default_option); 
     // injecting <option value> Select your category </option> under select tag 

     // creating options of subcategories, and injecting under the select element as children 
     for(var i = 0 ; i< value_array.length ; i++){ 
      var option_element = document.createElement("option"); 
      option_element.setAttribute("value",value_array[i]); 
      option_element.innerHTML = option_element.innerHTML + inner_html_array[i]; 
      select.appendChild(option_element) 
     } 



    } 


     // this is supposed to read the json data of the categories and sub categories 

     $.ajax({ 
     url: "http://localhost:3000/categories_api/show", 
     type: 'GET', 
     dataType: 'json', 
     success: function(res) { 
       $cat_obj = res; 
     } 
    }); 

}); 

を書かれているコードです

挿入されているselectタグは、私はこの問題を持っています、このように見ているブラウザ

<div class="col-md-5 sub-cat-dropdown" style="-webkit-user-select: text;"><select class="select required sub-cat" required="required" name="product[sub_id]"><option value="">Select your sub category</option><option value="15">Bottle</option><option value="16">Charger</option></select></div> 

からコピーされた。しかし、フォームの送信が発生したとき、のparams

{"utf8"=>"✓", "authenticity_token"=>"zUVF55KdvQ4l8nBjtlIcofqHECgd3/pIi7U97cF0xbrnnf9xJqNns8gPPSOgpVAEcs6V0bewdE9XGQFu4PHGUg==", "product"=>{"name"=>"jdkrfb", "price"=>"89", "availability"=>"true", "about"=>"sfukb", "ref"=>"78678", "texture"=>"jkdfbjkrbg", "shipping"=>"jkdfsk", "category_id"=>"12", "notes"=>"jhhdfvbj", "packaging"=>"sajkf"}, "commit"=>"submit", "controller"=>"items", "action"=>"create"} 

をsub_idは持っていませんさ数時間を過ぎると、どんな援助も大歓迎です。

私の所見：AJAX呼び出しに問題がない

、およびselectタグを生成している機能。 DOMに生成されたselectタグがあることがわかり、sub-cat-dropdownの子です。

スタティックセレクトタグのsub_idが送信されていますが、ダイナミックの場合はそうではありません。それは提出されていません

Answer 1

javascriptでは、動的に作成された要素にイベントリスナーを追加することはできません。そのため、動的に作成された選択オプション入力はDOM内にありますが、フォームデータには含まれません。選択入力を静的に保ち、オプションを動的に保持してください。

<div class="row " style="height:100px;width:100%"> 
<div class="col-md-5 sub-cat-dropdown"> 
    <select class="select required form-control" required="required" name="product[sub_id]" id="sub_cat_id"> 
    </select>  
</div> 
</div> 

代わりの

<div class="row " style="height:100px;width:100%"> 
<div class="col-md-5 sub-cat-dropdown"> 
</div> 
</div> 

、その後はJavaScriptを通じて選択入力内部のオプションを変更 -

function inject_sub_category(value_array, inner_html_array){ 

    // setting the default option 

    var default_option = document.createElement("option"); 
    default_option.setAttribute("value","") 
    default_option.innerHTML = default_option.innerHTML + "Select your sub category"; 
    $("#sub_cat_id").append(default_option); 
    // injecting <option value> Select your category </option> under select tag 

    // creating options of subcategories, and injecting under the select element as children 
    for(var i = 0 ; i< value_array.length ; i++){ 
     var option_element = document.createElement("option"); 
     option_element.setAttribute("value",value_array[i]); 
     option_element.innerHTML = option_element.innerHTML + inner_html_array[i]; 
     $("#sub_cat_id").append(option_element) 
    } 

} 

event delegationを使用してそれを行うための別の方法があります。