Rails button_tag提交按钮不起作用

时间:2019-12-04 19:42:41

标签: ruby-on-rails

在5.2轨上,我有以下两个button_tags

<%= button_tag "Save for Later", type: 'submit', name: "application_status_id", value: 2, class: "btn btn-light" %>
<%= button_tag "Submit for Consideration", type: 'submit', name: "application_status_id", value: 3, class: "btn btn-primary" %>

它们以前在工作,但是现在当我单击它们时,什么也没发生。没有页面加载,服务器中没有新行,什么也没有。

当我将button_tag更改为link_to(如this SO post中的建议)时,按钮上的样式消失了,表格刷新了,什么也没有保存,这在服务器中发生了: / p>

Started GET "/app_forms/new?class=btn+btn-primary&name=application_status_id&type=submit&value=3" for ::1 at 2019-12-04 11:33:00 -0800
Processing by AppFormsController#new as HTML
  Parameters: {"class"=>"btn btn-primary", "name"=>"application_status_id", "type"=>"submit", "value"=>"3"}
  Value Load (0.4ms)  SELECT  "values".* FROM "values" WHERE "values"."selected" = $1 ORDER BY "values"."id" ASC LIMIT $2  [["selected", true], ["LIMIT", 1]]
  ↳ app/controllers/application_controller.rb:5
  Rendering app_forms/new.html.erb within layouts/application
  Rendered app_forms/_form.html.erb (43.8ms)
  Rendered app_forms/new.html.erb within layouts/application (47.9ms)
  User Load (0.7ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  ↳ app/views/layouts/_navbar.html.erb:20
  Rendered layouts/_navbar.html.erb (22.4ms)
  Rendered layouts/_notifications.html.erb (0.5ms)
  Rendered layouts/_footer.html.erb (0.7ms)
Completed 200 OK in 634ms (Views: 483.5ms | ActiveRecord: 34.6ms)

关于如何使它工作的任何想法? app_form#create方法如下:

  def create
    @app_form = AppForm.new(app_form_params)
    @app_form.user_id = current_user.id
    @app_form.application_status_id = params[:application_status_id]
    @app_form.final_decision_id = 1
    @app_form.funding_status_id = 1
    if @app_form.application_status_id == 3
      @app_form.submitted = true
    end

    respond_to do |format|
      if @app_form.save
        if @app_form.application_status_id == 3
          Log.create(category: "User Action", action: "New Application Submitted", automatic: false, object: true, object_linkable: true, object_category: "AppForm", object_id: @app_form.id, taken_by_user: true, user_id: @app_form.user.id)
          if ApplicationChangeMailer.new_application_email(@app_form).deliver
            Log.create(category: "Email", action: "New Application Email Sent to Committee", automatic: true, object: true, object_linkable: true, object_category: "AppForm", object_id: @app_form.id, taken_by_user: false)
          end
          format.html { redirect_to user_path(current_user), notice: 'Your application has been successfully submitted.  You will receive an email when the committee reaches a decision.' }
        else
          Log.create(category: "User Action", action: "New Application Created", automatic: false, object: true, object_linkable: true, object_category: "AppForm", object_id: @app_form.id, taken_by_user: true, user_id: @app_form.user.id)
          format.html { redirect_to user_path(current_user), notice: 'Your application has been successfully saved.  It will not be reviewed until you submit it for consideration.' }
        end
        format.json { render :show, status: :created, location: @app_form }
      else
        format.html { render :new }
        format.json { render json: @app_form.errors, status: :unprocessable_entity }
      end
    end
  end

(很长)形式如下:

<%= simple_form_for(@app_form) do |f| %>
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">


    <% if @app_form.new_record? %>
      <section id="application-type-section">
        <h2 class="toca-uppercase text-center mb-3">I want to apply for a...</h2>
        <%= f.hidden_field :application_type %>
        <div class="row mb-5">

          <div class="col-12 col-sm-4 text-center">
            <div class="select-box application-type-box" id="hardship">
              <h5 class="toca-uppercase">Hardship</h5>
              <%= image_tag "Hardship.png", class: "ball-mini pb-2", alt: "Soccer ball that needs help with a hardship." %>
            </div> <!-- select box -->
          </div> <!-- col -->

          <div class="col-12 col-sm-4 text-center">
            <div class="select-box application-type-box" id="scholarship">
              <h5 class="toca-uppercase">Scholarship</h5>
              <%= image_tag "Scholarship.png", class: "ball-mini pb-2", alt: "Soccer ball in a graduation cap." %>
            </div> <!-- select box -->
          </div> <!-- col -->

          <div class="col-12 col-sm-4 text-center">
            <div class="select-box application-type-box" id="charity">
              <h5 class="toca-uppercase">Charity</h5>
              <%= image_tag "Charity.png", class: "ball-mini pb-2", alt: "Soccer ball ready to do some charity work." %>
            </div> <!-- select box -->
          </div> <!-- col -->

        </div> <!-- row -->
      </section>
    <% end %>


    <section id="my-info-section" class="z-depth-1 p-5 my-5 info-section">
      <h2 class="toca-uppercase text-center">My Information</h2>
      <p class="text-center"><small>This information is anonymous and will not be visible to the deciding committee.</small></p>
      <div class="row">

        <div class="col-12">
          <div class="md-form">
            <%= f.text_field :full_name, class: "form-control", required: true, id: "full_name" %>
            <label for="full_name">Full Name</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-sm-6">
          <div class="md-form">
            <%= f.text_field :date, placeholder: "Select Application Date", class: "form-control datepicker", id: "date" %>
            <label for="date">Application Date</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-sm-6">
          <div class="md-form">
            <%= f.text_field :start_date, placeholder: "Select Start Date", class: "form-control datepicker", id: "start_date" %>
            <label for="start_date">Date You Started at TOCA</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-6 col-lg-3">
          <div class="md-form">
            <%= f.text_field :position, class: "form-control", id: "position", required: true %>
            <label for="position">Position</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-6 col-lg-3">
          <div class="md-form">
            <%= f.text_field :branch, class: "form-control", id: "branch", required: true %>
            <label for="branch">TOCA Branch</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-6 col-lg-3">
          <div class="md-form">
            <%= f.text_field :email_non_toca, class: "form-control mb-4", id: "non-toca-email", required: true %>
            <label for="non-toca-email">Email (Non-TOCA)</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-6 col-lg-3">
          <div class="md-form">
            <%= f.text_field :mobile, class: "form-control mb-4", id: "mobile", required: true %>
            <label for="mobile">Mobile Phone</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-lg-6">
          <div class="md-form">
            <%= f.text_field :address, class: "form-control mb-4", id: "address", required: true %>
            <label for="address">Your Street Address</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-5 col-lg-3">
          <div class="md-form">
            <%= f.text_field :city, class: "form-control mb-4", id: "city", required: true %>
            <label for="city">City</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-3 col-lg-1">
          <div class="md-form">
            <%= f.text_field :state, class: "form-control mb-4", id: "state", required: true %>
            <label for="state">State</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-4 col-lg-2">
          <div class="md-form">
            <%= f.text_field :zip, class: "form-control mb-4", id: "zip", required: true %>
            <label for="zip">Zip Code</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
      </div> <!-- row -->

    </section> <!-- my info section -->


    <section id="for-other-hardship" class="z-depth-1 p-5 my-5 hardship-only">
      <h2 class="toca-uppercase text-center">Information for Recipient</h2>
      <p class="text-center"><small>Fill out this section if you are applying on the behalf of another TOCA employee.</small></p>

      <div class="row">
        <div class="field form-check text-left for_other">
          <%= f.check_box :for_other, class: "form-check-input", id: "for_other" %>
          <%= f.label "This hardship is for someone OTHER THAN myself.", class: "form-check-label", for: "for_other" %>
        </div>
      </div>

      <div class="for-other-content hidden">
        <div class="row mt-4">

          <div class="col-12 col-sm-6">
            <div class="md-form">
              <%= f.text_field :for_other_email, class: "form-control mb-4", id: "for-other-email", required: true %>
              <label for="for-other-email">Your Non-TOCA Email Address</label>
            </div> <!-- md-form -->
          </div> <!-- col -->
          <div class="col-12 col-sm-6">
            <div class="md-form">
              <%= f.text_field :recipient_toca_email, class: "form-control mb-4", id: "recipient-toca-email", required: true %>
              <label for="recipient-toca-email">Recipient's TOCA Email</label>
            </div> <!-- md-form -->
          </div> <!-- col -->

        </div> <!-- row -->
      </div> <!-- for-other-content -->

    </section> <!-- for other hardship -->


    <section id="financial-information" class="z-depth-1 p-5 my-5 info-section">
      <h2 class="toca-uppercase text-center">Financial Information</h2>

      <div class="hardship-only row">

        <div class="col-12 col-sm-4">
          <div class="md-form">
            <%= f.text_field :bank_name, class: "form-control mb-4", id: "bank-name" %>
            <label for="bank-name">Bank Name</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-sm-4">
          <div class="md-form">
            <%= f.text_field :bank_phone, class: "form-control mb-4", id: "bank-phone" %>
            <label for="bank-phone">Bank Phone</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-sm-4">
          <div class="md-form">
            <%= f.text_field :bank_address, class: "form-control mb-4", id: "bank-address" %>
            <label for="bank-address">Bank Address</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

      </div> <!-- hardship only row -->

      <div class="row non-hardship">

        <div class="col-12 col-sm-4 col-lg-3">
          <div class="md-form">
            <%= f.text_field :institution_name, class: "form-control mb-4", id: "institution-name" %>
            <label for="institution-name">Institution Name</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-sm-4 col-lg-3">
          <div class="md-form">
            <%= f.text_field :institution_contact, class: "form-control mb-4", id: "institution-contact" %>
            <label for="institution-contact">Institution Contact Person</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-sm-4 col-lg-3">
          <div class="md-form">
            <%= f.text_field :institution_phone, class: "form-control mb-4", id: "institution-phone" %>
            <label for="institution-phone">Institution Phone</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-lg-3">
          <div class="md-form">
            <%= f.text_field :institution_address, class: "form-control mb-4", id: "institution-address" %>
            <label for="institution-address">Institution Address</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
      </div> <!-- non-hardship row -->

      <div class="row">
        <div class="col-12 col-sm-6">
          <div class="md-form">
            <%= f.number_field :requested_amount, step: 0.01, class: "form-control mb-4", placeholder: "Numbers only (no $ or punctuation)", required: true %>
            <label for="requested-amount">Amount Requested (From TOCA Cares)</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 col-sm-6">
          <div class="md-form">
            <%= f.number_field :self_fund, step: 0.01, class: "form-control mb-4", placeholder: "Numbers only (no $ or punctuation)", required: true %>
            <label for="self-fund">Amount You Can Cover (Not Including Request)</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
        <div class="col-12 form-check text-left mb-4 loan-check">
          <%= f.check_box :loan_preferred, class: "form-check-input", id: "loan_preferred" %>
          <%= f.label "I would prefer to receive a loan than get a grant.", class: "form-check-label", for: "loan_preferred" %>
        </div>
        <div class="col-12 loan-stuff">
          <%= f.text_area :loan_preferred_description, class: "form-control mb-4", placeholder: "Please describe your proposed loan vs. grant allocation." %>
        </div>
      </div> <!-- row -->


    </section> <!-- financial-information -->



    <section id="request-information" class="z-depth-1 p-5 my-5 info-section">
      <h2 class="toca-uppercase text-center">Request Information</h2>

      <div class="row">
        <div class="col-12">
          <%= f.text_area :description, class: "form-control mb-4", placeholder: "Please describe your situation." %>
        </div> <!-- col -->
      </div> <!-- non-hardship row -->

      <div class="row hardship-only">
        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :accident, class: "form-check-input", id: "accident" %>
            <%= f.label :accident, class: "form-check-label", for: "accident" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :catastrophe, class: "form-check-input", id: "catastrophe" %>
            <%= f.label :catastrophe, class: "form-check-label", for: "catastrophe" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :counseling, class: "form-check-input", id: "counseling" %>
            <%= f.label :counseling, class: "form-check-label", for: "counseling" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :family_emergency, class: "form-check-input", id: "family_emergency" %>
            <%= f.label "Family Emergency", class: "form-check-label", for: "family_emergency" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6">
          <div class="field form-check text-left">
            <%= f.check_box :health, class: "form-check-input", id: "health" %>
            <%= f.label :health, class: "form-check-label", for: "health" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :memorial, class: "form-check-input", id: "memorial" %>
            <%= f.label :memorial, class: "form-check-label", for: "memorial" %>
          </div>
        </div> <!-- column -->

        <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
          <div class="field form-check text-left">
            <%= f.check_box :other_hardship, class: "form-check-input", id: "other_hardship" %>
            <%= f.label :other_hardship, class: "form-check-label", for: "other_hardship" %>
          </div>
          <div class="field col-9 d-none d-sm-block">
            <%= f.text_field :other_hardship_description, class: "form-control mb-4", style: "margin-left: 40px", placeholder: "Other Description" %>
          </div>
        </div> <!-- col -->

      </div> <!-- hardship only row -->
    </section> <!-- request-information -->










    <section id="signatures" class="z-depth-1 p-5 my-5 info-section">
      <h2 class="toca-uppercase text-center">Signatures</h2>
      <h5 class="mb-0 toca-uppercase">Statement of Intent</h5>
      <small>
        I agree that all of the information provided in this application is truthful and reflects a genuine financial hardship. In no way am I attempting to take advantage of TOCA Cares, nor my fellow employees, as this is a community fund. If it appears that I have, serious actions will be taken, jeopardizing my job at TOCA and future access to the community fund.
      </small>

      <div class="row">
        <div class="col-12 col-sm-8">
          <div class="md-form">
            <%= f.text_field :intent_signature, class: "form-control mb-4", id: "intent-signature", required: true %>
            <label for="intent-signature">Type Your Name to Represent Your Signature</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-4">
          <div class="md-form">
            <%= f.text_field :intent_signature_date, class: "form-control datepicker", id: "intent_signature_date" %>
            <label for="intent_signature_date">Date</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
      </div> <!-- row -->

      <h5 class="mb-0 toca-uppercase">Release Agreement</h5>
      <small>
        I agree to the release of confidential information from TOCA Cares to the Associate Emergency Fund Committee and to allow verification by Helping Hands Ministries, Inc., of information pertinent to this request, including a credit bureau report, prior to receipt of any funds.
      </small>

      <div class="row">
        <div class="col-12 col-sm-8">
          <div class="md-form">
            <%= f.text_field :release_signature, class: "form-control mb-4", id: "release-signature", required: true %>
            <label for="release-signature">Type Your Name to Represent Your Signature</label>
          </div> <!-- md-form -->
        </div> <!-- col -->

        <div class="col-12 col-sm-4">
          <div class="md-form">
            <%= f.text_field :release_signature_date, class: "form-control datepicker", id: "release_signature_date" %>
            <label for="release_signature_date">Date</label>
          </div> <!-- md-form -->
        </div> <!-- col -->
      </div> <!-- row -->

    </section> <!-- signatures -->



  </div> <!-- form fields -->



  <div class="form-actions text-center pb-5 info-section">
    <%= button_tag "Save for Later", type: 'submit', name: "application_status_id", value: 2, class: "btn btn-light" %>
    <%= button_tag "Submit for Consideration", type: 'submit', name: "application_status_id", value: 3, class: "btn btn-primary" %>
  </div>
<% end %>











<script type="text/javascript">
  $(document).ready(function() {

    $('.datepicker').pickadate();

    $('.info-section').hide();
    $('.hardship-only').hide();
    <% if @app_form.application_type == "Hardship" %>
      $('.info-section').show();
      $('.hardship-only').show();
    <% elsif @app_form.application_type == "Scholarship" %>
      $('.info-section').show();
      $('.non-hardship').show();
    <% elsif @app_form.application_type == "Charity" %>
      $('.info-section').show();
      $('.non-hardship').show();
    <% end %>

    var clearHardshipFields = function() {
      $("#for-other-email").val("");
      $("#recipient-toca-email").val("");
      $('#for_other').prop('checked', false);
      $(".for-other-content").hide();
      $("#bank_name").val("");
      $("#bank_phone").val("");
      $("#bank_address").val("");
      $("#accident").prop('checked', false);
      $("#catastrophe").prop('checked', false);
      $("#counseling").prop('checked', false);
      $("#family_emergency").prop('checked', false);
      $("#health").prop('checked', false);
      $("#memorial").prop('checked', false);
      $("#other_hardship").prop('checked', false);
      $("#app_form_other_hardship_description").val("");
    };

    var clearNonHardshipFields = function() {
      $("#institution_contact").val("");
      $("#institution_name").val("");
      $("#institution_phone").val("");
      $("#institution_address").val("");
    };

    $('#hardship').click(function() {
       $('.application-type-box').removeClass('active');
       $(this).addClass('active');
       $('#app_form_application_type').val('Hardship');
       $('.charity-field').addClass('hidden');
       $('.scholarship-field').addClass('hidden');
       $('.hardship-field').removeClass('hidden');
       $('.info-section').show();
       $('.hardship-only').show();
       $('.non-hardship').hide();
       clearNonHardshipFields();
    });
    $('#scholarship').click(function() {
      $('.application-type-box').removeClass('active');
      $(this).addClass('active');
      $('#app_form_application_type').val('Scholarship');
      $('.hardship-field').addClass('hidden');
      $('.charity-field').addClass('hidden');
      $('.scholarship-field').removeClass('hidden');
      $('.non-hardship').show();
      $('.hardship-only').hide();
      clearHardshipFields();
      $('.info-section').show();
    });
    $('#charity').click(function() {
       $('.application-type-box').removeClass('active');
       $(this).addClass('active');
       $('#app_form_application_type').val('Charity');
       $('.hardship-field').addClass('hidden');
       $('.charity-field').removeClass('hidden');
       $('.scholarship-field').addClass('hidden');
       $('.non-hardship').show();
       $('.hardship-only').hide();
       clearHardshipFields();
       $('.info-section').show();
    });

    $(".for-other-content").hide();
    var forOtherStuff = function() {
      if( $("#for_other").is(':checked')) {
          $(".for-other-content").show();
      } else {
          $(".for-other-content").hide();
          $("#for-other-email").val("");
          $("#recipient-toca-email").val("");
      }
    };
    forOtherStuff();
    $(".for_other").click(function() { forOtherStuff(); });

    $(".loan-stuff").hide();
    var loanStuff = function() {
      if( $("#loan_preferred").is(':checked')) {
          $(".loan-stuff").show();
      } else {
          $(".loan-stuff").hide();
          $("#app_form_loan_preferred_description").val("");
      }
    };
    loanStuff();
    $("#loan_preferred").click(function() { loanStuff(); });



   });
</script>

谁能看到为什么它停止工作了?

1 个答案:

答案 0 :(得分:0)

原来,有一个字段是必填字段,也是隐藏字段。该错误阻止了提交,但仅当我检查开发工具控制台时才显示。

它显示An invalid form control with name='' is not focusable,我使用this question进行了修复,并将指定的字段设为可选。

相关问题