Javascript 分配 ruby​​ on Rails 表单值

Question

我试图获取一个脚本来在提交表单时分配product_id 的值。我的脚本现在始终将值分配为 1。我需要它来分配产品的 Product_id。我注意到，当我提交时，它实际上会将选择更改为等于 id 1 的选择，那么我是否搞乱了脚本，将其重写为 1？

Here是一个 JSFiddle，它在 html 中似乎工作正常，但在我的 ruby​​ 代码中却不行。

脚本:

$(function(){
$("#commit").on("click", function(){
    var valueAssigned = false;
    $('select').each(function(){
        if($(this).val())
        {
            $("[name='question[product_id]']").val($(this).val());
            valueAssigned = true;
            return;
        }
    });
});
});

表单:注意根据选择的类别只显示collection_select之一。脚本根据选择显示和隐藏它们。

<%= form_for @question, url: new_tf_question_path(@question) do |f| %>

<%= render 'shared/error_questions' %>

<%= f.label :category %><br>
<%= f.select :category, [ ["IP Voice Telephony", "ip_voice"], ["IP Video Surveillance", "ip_video_surveillance"], ["IP Video Telephony", "ip_video_telephony"], ["Enterprise Gateways", "enterprise_gateways"], ["Consumer ATAs", "consumer_atas"], ["IP PBX", "ip_pbx"] ], {prompt: "Select Category"}, class: "input-lg", :id => "category" %>

<div id="ip_voice">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "ip_voice" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id1", name: "voice"} %>
</div>

<div id="ip_video_surveillance">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "ip_video_surveillance" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id2", name: "surv"} %>
</div>

<div id="ip_video_telephony">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "ip_video_telephony" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id2", name: "video"} %>
</div>

<div id="consumer_atas">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "consumer_atas" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id3", name: "atas"} %>
</div>

<div id="enterprise_gateways">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "enterprise_gateways" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id4", name: "gate"} %>
</div>

<div id="ip_pbx">
<%= f.label :product_id %><br>
<%= f.collection_select :product_id, Product.where({ category: "ip_pbx" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id5", name: "pbx"} %>
</div>

<input id="targetField" type="hidden" name="question[product_id]" value="0"/>

<%= f.label :section %><br>
<%= f.collection_select :section, @sections, :id, :name, {prompt: "Select a section"}, {class: "form-control input-lg" } %>

<%= f.label :active %><br>
<%= f.check_box :active %>


<%= f.fields_for :answers do |builder| %>

<%= render 'tf_answers', :f => builder %>

<% end %>

<%= f.submit "Create Question", class: "btn btn-lg btn-primary", id: "commit", style: "margin-top: 45px;" %>

<% end %>

我不熟悉 javascript，因此非常感谢您的帮助。

编辑

问题 Controller

def new
@question = Question.new    
@products = Product.all
end
def new_mc
@sections = Section.all
@question = Question.new
4.times { @question.answers.build }
end
def new_tf
@sections = Section.all
@question = Question.new
@question.answers.build
end

# GET /questions/1/edit
def edit
@sections = Section.all
end

# POST /questions
# POST /questions.json
def create

if params[:ip_video_telephony_product_id] != nil
  params[:product_id] = params[:ip_video_telephony_product_id]
end
 #:enterprise_gateways_product_id, :ip_video_surveillance_product_id, :ip_voice_product_id, :consumer_atas_product_id
@question = Question.new(question_params + params[:product_id]) 
respond_to do |format|
  if @question.save
    @answer = Answer.find_by_question_id(@question.id)
    if @answer.option == "True"
      Answer.create(option: "False", question_id: @answer.question_id, correct: false)
    end
    if @answer.option == "False"
      Answer.create(option: "True", question_id: @answer.question_id, correct: false)
    end
    format.html { redirect_to @question, notice: 'Question was successfully created.' }
    format.json { render action: 'show', status: :created, location: @question }
  else
    format.html { render action: 'new' }
    format.json { render json: @question.errors, status: :unprocessable_entity }
  end
end
end
....
def question_params
  params.require(:question).permit(:ip_video_telephony_product_id, :enterprise_gateways_product_id, :ip_video_surveillance_product_id, :ip_voice_product_id, :consumer_atas_product_id, :section, :content, :question_type, :category, :product_id, :active, :user_id, answers_attributes: [ :option, :correct, :question_id ] ).
  merge user_id: current_user.id
end  

日志:

Started POST "/tf_question" for 127.0.0.1 at 2014-09-19 17:09:59 -0700
Processing by QuestionsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"x", "question"=>{"question_type"=>"TF", "content"=>"damn", "category"=>"ip_video_telephony", "section"=>"1", "active"=>"1", "answers_attributes"=>{"0"=>{"correct"=>"1", "option"=>"True"}}}, "voice"=>"", "surv"=>"", "video"=>"20", "atas"=>"", "gate"=>"", "pbx"=>"", "commit"=>"Create Question"}
User Load (2.6ms)  SELECT  "users".* FROM "users"  WHERE "users"."remember_token" = 'x' LIMIT 1
(0.1ms)  begin transaction
(0.0ms)  rollback transaction
Completed 500 Internal Server Error in 23ms

新形式:我只更改了所有这些内容并删除了脚本。

<div id="ip_voice">
<%= f.label :product_id %><br>
<%= f.collection_select :ip_voice_product_id, Product.where({ category: "ip_voice" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg", id: "question_product_id1", name: "voice"} %>
</div>

Answer 1

虽然我不赞成你现在的表单排列，但是既然你说只有一个选择是可见的，你可以使用 jQuery 的 :visible 选择器。您可以将 JS 点击处理程序更改为类似这样的内容，假设您向所有这些选择元素添加了一个 question_product_id 类

var value = $('select.question_product_id:visible').val();
$("[name='question[product_id]']").val(value);

但是，如果是我写这样的表单，我不会费心使用 JS 代码设置 select 值，但我会向问题模型添加一堆实例属性(例如 ip_video_telephony_product_id)并将它们用于 f.collection_select :ip_video_telephony_product_id 调用，然后在 Controller 或模型中，我根据类别值计算应该使用哪个值，类似的东西。

示例

模型应该是这样的

class Question < ActiveRecord::Base
   attr_accessor :ip_video_telephony_product_id, :enterprise_gateways_product_id # etc ...
end

表单中的选择应如下所示

<div id="enterprise_gateways">
 <%= f.label :ip_video_telephony_product_id %><br>
 <%= f.collection_select :ip_video_telephony_product_id, Product.where({ category: "enterprise_gateways" }), :id, :name, {prompt: "Select a product"}, {class: "form-control input-lg"} %>
</div>

由于属性名称是一致的，我们可以在 Controller 中执行类似的操作(我更喜欢模型，但我们现在保持简单)

def create
  @question = Question.new(question_params)
  @question.product_id = question_params["#{question_params[:category]}_product_id"]
  # ...
end