下拉框选择以填充表单中的文本框

时间:2016-08-11 09:50:51

标签: javascript jquery ruby-on-rails ajax ruby-on-rails-4

我遇到了一些javascripts / AJAX的小问题,我希望有人可以帮助我或指出我正确的方向。

我想要做的是使用相同形式的collection_select填充我的每箱价格字段。这是一个订单表格,假设在我的订单表中创建一个条目。表格视图如下:

new.html.erb

    gangshema.methods.application_done(applicationid) {
        db.gang_applications.find({id:applicationid}, function(err,cursor) {
            //   return ($applications->status == 'avaliable' ? false : true);
        });
    }

我希望collection_select:product_id提取products表中的所有产品。当用户从下拉列表中选择他们想要订购的产品时,所选产品的价格将填充text_field:ctn_price。

product.rb

    function accept_application($userid,$applicationId) {
            $box = 'failure';

            if (empty($applicationId)) {
                $message = "applicationId is empty";
            } elseif ($this->application_done($applicationId)) {
                $message = "Already registred!";

            } else {
                $application = $this->getApplication($applicationId);
$test = true;
                if(!($test)) {
                    $message = "false test";
                } else {
                    $this->db->query("UPDATE `gang_applications` SET `status`='accepted', `by`='$userid' where `id`='$applicationId'");
                    $this->gangs->add_member($application->userid,'gang','member',$application->gangid);
                    $message = "Accept!";
                }

            }
            return $message;
        }

single_order.rb

<h1>Add a new order for <%= @customer.name %></h1>

<div class="row">
  <%= form_for(@order) do |f| %>
    <div class="col-md-6">
      <%= render 'shared/error_messages', object: f.object %>
      <%= f.hidden_field :customer_id, :value => @customer.id %>

      <h3>Order Details</h3>
      <%= f.label :address_id, "Delivery Address" %>
      <%= f.collection_select :address_id, @addresses, :id, :select_address, :prompt => "Select delivery location",class: 'form-control' %></br>      
      <%= f.label :remark, "Order Remark" %>
      <%= f.text_area :remark, class: 'form-control' %></br>

      <h3>What items would you like to place?</h3>
      <%= f.add_nested_fields_link :single_orders, "Add Product" %>
      <%= f.nested_fields_for :single_orders do |builder| %>
        <%= builder.collection_select :product_id, @products, :id, :select_product, {:prompt => "choose product"},   {:class => "product_selection form-control"}  %>
        <%= builder.text_field :ctn_price, placeholder: "Price/carton", id: "price", class: 'ctn_price_field form-control' %>
        <%= builder.text_field :qty, placeholder: "Quantity",id: "quantity", class: 'form-control' %>
        <%= builder.text_field :price, placeholder: "Amount", id: "total-amount", readonly: true, class: 'form-control' %>
        <%= builder.remove_nested_fields_link %>
      <% end %>
    </div>
      <%= f.submit "place order", class: "btn btn-primary" %>
  <% end %>
</div>

任何帮助都表示赞赏,因为我已经被困了几天:( 感谢您提前提供任何帮助。

1 个答案:

答案 0 :(得分:0)

您可以使用ajax调用执行此操作。在此之前创建一个api以将product_id作为输入并将@product呈现为输出。

   $("#product_selection_id").on('change', function(){
    var product_id = $(this).val();

    $.ajax({
      method: "GET",
      type: 'html',
      url: "call_url_for_get_product_api_with_product_id",
      cache: false,
      success: function(data, textStatus, jqxhr) {
        console.log("success");
      }
    });
  });

假设您的url_for_get_product_api作为js请求转到get_product操作。所以使用get_product.js.erb创建一个模板,如下所示

$('#ctn_price_field').val(@product.price)
#ihave not tested this code change this according to your requirements.

注意:在这里,我给出了一个由你自己模仿的模式。感谢。