在提交失败时保持 jQuery - Rails

Posted 2023-05-09

【中文标题】在提交失败时保持 jQuery - Rails

【英文标题】：Persist jQuery On Submission Failure - Rails

【发布时间】：2015-07-14 12:16:00

【问题描述】：

在我创建的表单中，当用户从下拉菜单中选择“成员类型”时，会使用 jQuery 根据该成员类型显示特定的 div。例如，选择“青年会员”将显示“出生日期”和“小时”的输入字段。

我遇到的问题是，在表单提交失败时，成员下拉菜单将保留选定的成员类型（就像所有表单字段都预先填充了用户失败的输入一样），而无法显示关联的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: $35") 
        $('#children, #youth').hide();
        $('#kollel, #hour').show();
       else if (selected == "Youth member: $35") 
        $('#kollel, #children').hide();
        $('#youth, #hour').show();
       else if (selected == "Monthly with children (Friday's): $55 + $16 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

【参考方案1】：

我假设逻辑是因为它必然会更改此处未发生的事件，它仍然是隐藏的

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

Jquery execute onchange event on onload