How to fill other form input when an item from dropdown has been selected in Ruby on Rails using Active Admin

Question

I'm a newbie using Ruby on Rails and ActiveAdmin to develop a project:

I have two models called DirectPurchase and Product. Table migrations look like this:

Products:

class CreateProducts < ActiveRecord::Migration
  def change
    create_table :products do |t|
      t.string :item_code
      t.string :item_name
      t.string :item_type
      t.string :central_name
      t.string :origin
      t.string :class_type
      t.decimal :unit_cost, precision: 8, scale: 2
      t.string :liens

      t.timestamps null: false
    end
  end
end

Direct Purchase:

class CreateDirectPurchases < ActiveRecord::Migration
  def change
    create_table :direct_purchases do |t|
      t.string :supplier
      t.string :product
      t.integer :quantity
      t.decimal :unit_cost, precision: 10, scale: 2
      t.decimal :commission_rate, precision: 10, scale: 2
      t.decimal :total_unit_cost, precision: 10, scale: 2
      t.decimal :misc_fees_liens, precision: 10, scale: 2
      t.decimal :misc_fees_insurance, precision: 10, scale: 2
      t.decimal :misc_fees_storage, precision: 10, scale: 2
      t.decimal :misc_fees_penalty, precision: 10, scale: 2
      t.decimal :witholding_tax, precision: 10, scale: 2
      t.decimal :commission_amount, precision: 10, scale: 2
      t.decimal :payable_gross, precision: 10, scale: 2
      t.decimal :payable_net, precision: 10, scale: 2
      t.string :reference_number

      t.timestamps null: false
    end
  end
end

Now what I want to do is on the new Direct Purchase form:

![direct purchase form][1]

The product input field is auto-populated by the existing products that have been entered in the past.

Now when I select a certain product from the dropdown list, I want the unit_cost of the product that I selected to be automatically be filled into the unit_cost field of the direct purchase form.

How to do this? My clue is to use :onchange and :input_html by as I said I'm still a newbie and don't have a clue how to do this.

/admin/direct_purchase.rb

ActiveAdmin.register DirectPurchase do

menu parent: "Transaction"

  permit_params :supplier, :product, :quantity, :unit_cost, :commission_rate, 
  :total_unit_cost, :misc_fees_liens, :misc_fees_insurance, :misc_fees_storage, :misc_fees_penalty,
  :witholding_tax, :commission_amount, :payable_gross, :payable_net, :reference_number

  index do
    selectable_column
    column :supplier
    column :product
    column :quantity
    column :unit_cost
    column :commission_rate
    column :total_unit_cost
    column :misc_fees_liens
    column :misc_fees_insurance
    column :misc_fees_storage
    column :misc_fees_penalty
    column :witholding_tax
    column :commission_amount
    column :payable_gross
    column :payable_net
    column :reference_number
    actions
  end

  form do |f|
    f.inputs "Direct Purchase Details" do
      f.input :supplier
      f.input :product, :as => :select, :collection => Product.all.map {|product| [product.item_name, product.unit_cost]}, :input_html => {:onchange => "SOMETHING HERE"}
      f.input :quantity
      f.input :unit_cost, :input_html => {:value => "unit_cost value from selected product"}
      f.input :commission_rate
      f.input :total_unit_cost, :input_html => { :readonly => true }
      f.input :misc_fees_liens
      f.input :misc_fees_insurance
      f.input :misc_fees_storage
      f.input :misc_fees_penalty
      f.input :witholding_tax
      f.input :commission_amount
      f.input :payable_gross
      f.input :payable_net
      f.input :reference_number
    end
    f.actions
  end
end

Any help is appreciated.

Answer 1

You need to use jQuery. Create a js file in the assets/javascript forlder:

$("input[name='direct_purchase[product]']").change(function() {
  $("input[name='direct_purchase[unit_cost]']").val($(this).val());
});

Or something similar...