坚持 jQuery 提交失败 - Rails

Question

在我创建的表单中，当用户从下拉菜单中选择 "Member type" 时，会使用 jQuery 根据该成员类型显示特定的 div。例如，选择 "Youth Member" 将显示 "DOB" 和 "Hour" 的输入字段。

我一直遇到的问题是，在表单提交失败时，成员下拉菜单将保留选定的成员类型（就像所有表单字段都预先填充了用户输入失败一样）而无法显示关联的 div（除非选择了其他成员类型）。

我的假设是，我可以预填充呈现的表单 (render 'new')，而无需选择成员类型。不过，这种做法听起来很乱。

如有任何帮助，我们将不胜感激。

新表单视图：

<% provide(:title, 'Create form') %>
<h1>Create a new form</h1>
<div class="col-md-12">
    <%= simple_form_for(@form, html: { class: 'form-horizontal' }) do |f| %>

      <%= render 'shared/error_messages' %>

      <%= f.input :first_name, error: false %>
      <%= f.input :last_name, error: false %>
      <%= f.input :email, error: false %>
      <%= f.input :phone, error: false %>
      <%= f.input :address, error: false %>
      <%= f.input :member_type, collection: Form::MEMBERSHIPS, include_blank: true, error: false %>

      <div id="children">
        <%= f.input :children, collection: Form::CHILDREN, error: false, include_blank: true %>
      </div>

      <div id="kollel">
        <p>Please provide proof of Kollel Attendence</p>
        <%= f.input :date, start_year: Time.now.year - 5, end_year: Time.now.year, label: "Please enter date began Kollel", error: false, include_blank: true %>
      </div>

      <div id="youth">
        <p>For 16 years old and younger; please provide valid ID</p>
        <%= f.input :dob, start_year: Time.now.year - 17, end_year: Time.now.year, label: "Please enter DOB", error: false, include_blank: true %>
      </div>

      <div id="hour">
        <%= f.input :hour, collection: Form::HOURS, error: false, include_blank: true %>
      </div>

      <%= render 'layouts/signature' %>
      </br></br>
      <%= f.hidden_field :base64 %>

      <p>FOR OFFICE USE ONLY:</p>

      <%= f.input :interaction, label: "Interaction type", collection: Form::INTERACTIONS, error: false %>

      <div id="new">
        <%= f.input :new_tag, error: false %>
        <%= f.input :deposit, label: "Cash deposit", error: false %>
        <%= f.input :notes, error: false %>
      </div>

      <div id="exchange">
        <%= f.input :new_tag, error: false %>
        <%= f.input :returned_tag, error: false %>
        <%= f.input :notes, error: false %>
      </div>

      <div id="refund">
        <%= f.input :returned_tag, error: false %>
        <%= f.input :deposit, label: "Cash refund", error: false %>
        <%= f.input :notes, error: false %>
      </div>

      <%= f.submit "Create form", class: "btn btn-primary", id: "save-form" %>
    <% end %>
</div>

jQuery代码：

$('#kollel, #youth, #hour, #children').hide();

    $("#form_member_type").change(function() {
      var selected = $('#form_member_type').find(":selected").val();
      if (selected == "Kollel discount: ") {
        $('#children, #youth').hide();
        $('#kollel, #hour').show();
      } else if (selected == "Youth member: ") {
        $('#kollel, #children').hide();
        $('#youth, #hour').show();
      } else if (selected == "Monthly with children (Friday's):  +  per child") {
        $('#kollel, #youth, #hour').hide();
        $('#children').show();
      } else {
        $('#kollel, #youth, #hour, #children').hide();
      }
    });

    $('#new, #exchange, #refund').hide();

    $('#form_interaction').change(function() {
      var selected = $('#form_interaction').find(':selected').val();
      if (selected == "NEW") {
        $('#exchange, #refund').hide();
        $('#new').show();
      } else if (selected == "EXCHANGE") {
        $('#new, #refund').hide();
        $('#exchange').show();
      } else if (selected == "REFUND") {
        $('#new, #exchange').hide();
        $('#refund').show();
      }
    });

表单控制器：

class FormsController < ApplicationController
  before_action :logged_in_user
  before_action :admin_user, only: :destroy

  def index
    @forms = Form.paginate(page: params[:page], :per_page => 20)
  end

  def show
    @form = Form.find(params[:id])
    respond_to do |format|
      format.html
      format.pdf do
        render :pdf => @form.last_name + '_' + @form.first_name + '_' + @form.created_at.strftime("%d %b %Y"),
        :template => 'forms/show.pdf.erb',
        :show_as_html => params[:debug].present?
      end
    end
  end

  def new
    @form = Form.new
  end

  def create

    @form = Form.new(form_params)

    signature = Paperclip.io_adapters.for(params[:form][:base64])
    signature.original_filename = "signature.png"
    @form.signature = signature

    if @form.save
      flash[:success] = "The form has been successfully created!"
      redirect_to @form
    else
      render 'new'
    end
  end

  def edit
    @form = Form.find(params[:id])
  end

  def update
    @form = Form.find(params[:id])
    if @form.update_attributes(form_params)
      flash[:success] = "Form has been updated!"
      redirect_to @form
    else
      render 'edit'
    end
  end

  def destroy
    Form.find(params[:id]).destroy
    flash[:success] = "Form deleted"
    redirect_to forms_path
  end

  private

  def form_params
    params.require(:form).permit(:first_name, :last_name, :email, :phone, :address, :member_type, :date, :base64, :children, :hour, :interaction, :new_tag, :returned_tag, :deposit, :notes)
  end
end

Answer 1

我假设逻辑是因为它一定会改变这里没有发生的事件所以它仍然隐藏

也许试试根据所选输入切换 div 的函数，并在更改时调用该函数。

Jquery execute onchange event on onload

坚持 jQuery 提交失败 - Rails

Persist jQuery On Submission Failure - Rails

jquery

ruby-on-rails

simple-form