Динамическое поле с field_for

Question

У меня есть форма "продать", и я использую fields_for для размещения информации о продуктах для продажи.

Вот моя форма fields_for:

<%= f.fields_for :sellproducts do |c| %>
    <%= c.label :product %> <%= c.grouped_collection_select :product_id, Category.order(:name), :products, :name, :id, :name, :include_blank => true  %>
    <%= c.label :quantity %> <%= c.text_field :quantity, :size =>"5" %><br />

    <%= c.label :cost %> <%= c.text_field :cost, :size =>"5" %>

    <%= c.link_to_remove "Delete" %>

<% end %>

Я хотел бы, чтобы текстовое поле "cost" динамически заполнялось значением product.price, когда пользователь выбирает продукт в поле выбора, но я не знаю, как это сделать. На самом деле я не знаю, как получить значение, а затем поставить его...

Кто-нибудь может мне помочь, пожалуйста?

Большое спасибо.

Answer 1

Два способа, которыми я могу думать, что вы можете сделать это, оба с участием JS.

Non-Ajax: создайте ваши параметры и включите атрибуты данных для каждого продукта.

<option value="<%= product.id %>" data-price="<%= product.price %>"><%= product.name %></option>

Затем измените, просто выберите выбранную опцию и поместите ее data-price в поле ввода стоимости.

$('body').on('change', 'select.products', function(){
    var that = $(this),
      , costInput = that.parent("fieldset").("input.cost"); # Perhaps if you wrap the elements in a fieldset

    costInput.val(that.find('option:selected').val())
});

Плюсы: данные есть Минусы: вам придется управлять "выбранной" частью, которая идет с помощниками формы

Ajax (лучший способ): добавьте событие onchange, которое извлекает цену для выбранного продукта.

$('body').on('change', 'select.products', function(){
    var that = $(this),
      , costInput = that.parent("fieldset").("input.cost"); # Perhaps if you wrap the elements in a fieldset

     $.ajax({
        url: "products/price",
        data: {id: that.find('option:selected').val()),
        dataType: 'script'
    }).done(function ( price ) {
        costInput.val(price)
    });
});

Плюсы: не нужно суетиться с HTML. Минусы: не могу придумать, стоит отметить.