ruby on rails - How to pass product's id to bootstrap modal -

i have product , order models. product has many orders , order belongs product. there button 'order' on product's page, when user clicks on it, bootstrap modal opens up. on modal render order's form create new one.

i want know, how pass product's id form on modal? button open modal this:

%button.btn.btn-info.btn-lg{"data-target" => "#mymodal", "data-toggle" => "modal", :type => "button"} order 

and modal itself:

 #mymodal.modal.fade{:role => "dialog"}   .modal-dialog     .modal-content       .modal-header         %button.close{"data-dismiss" => "modal", :type => "button"} ×         %h4.modal-title order form       .modal-body         = render 'orders/form'       .modal-footer         %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} close 

i need product's id create new order, belong product. if think in wrong direction, please, correct me.

many in advance help!

update solved!! many-many-many arup rakshit (@aruprakshit)!!!

  - @products.last(3).each |product|      %h4= product.name      %button.btn.btn-info.btn-lg{"data-target" => "#mymodal", "data-toggle" => "modal", :type => "button", data: {product_id: product.id}} order      #mymodal.modal.fade{:role => "dialog"}       .modal-dialog         .modal-content           .modal-header             %button.close{"data-dismiss" => "modal", :type => "button"} ×             %h4.modal-title order form           .modal-body             #new_order               = render 'orders/form', product: product           .modal-footer             %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} close    

orders/form:

= form_for order.new |f|   = f.hidden_field :product_id   = f.text_field :user_name, placeholder: 'name', class: 'form-control'     = f.submit 'order', class: 'btn btn-primary' 

application.js:

$( document ).ready(function() {  $('body').on('shown.bs.modal', '#mymodal', function (e) {   var product_id = $(e.relatedtarget).data('product-id');   $('#order_product_id').val(product_id);  }); }); 

keep product in modal button using data attribute. like

%button.btn.btn-info.btn-lg{"data-target" => "#mymodal", "data-toggle" => "modal", :type => "button", data: {product_id: @product.id}} order 

inside form add hidden field:

= form_for order.new |f|   .form-group     = f.text_field :user_name, placeholder: 'name', class: 'form-control'     = f.hidden_field :product_id 

you need use below js, populate hidden field value.

$('body').on('shown.bs.modal', '#mymodal', function (e) {   var product_id = $(e.relatedtarget).data('product-id');   $('#order_product_id').val(product_id);  }); 

#new_order form id, change yours one. bootstrap modal events.