Rails：條紋形式被張貼兩次

Question

我在 Enrollment#new 上有一個帶有條紋形式的 Enrollment 模型。 當用戶提交表單時，它似乎向 Enrollment#create 提交了兩次。

這是帶有條紋形式的 new.html.erb ：

  <%= form_tag enrollments_path, :id=>"stripeForm" do %>

       <%= text_field_tag(:number, nil, :placeholder=>"Credit Card Number", :class=>"form-control", :maxlength => 19, :'data-stripe'=>"number") %>
       <%= text_field_tag(:'exp-month', nil, :placeholder=>"mm", :class=>"form-control", :maxlength => 2, :'data-stripe'=>"exp-month") %>
       <%= text_field_tag(:'exp-year', nil, :placeholder=>"yy", :class=>"form-control", :maxlength => 2, :'data-stripe'=>"exp-year") %>
       <%= text_field_tag(:cvc, nil, :placeholder=>"cvc", :class=>"form-control", :maxlength => 3, :'data-stripe'=>"cvc") %>
       <%= hidden_field_tag 'stripeAmount', @workshop.price %>
       <%= hidden_field_tag 'workshop', @workshop.id %>

      <button class="buy-button col-xs-12 col-md-6 col-md-offset-3" id="stripe-button">Register Now</button>

    <% end %>


  <script>

    var ready;

    ready = function() {
        Stripe.setPublishableKey("<%= ENV['stripe_publishable_key'] %>");
        var stripeResponseHandler = function(status, response) {
          var $form = $('#stripeForm');
          if (response.error) {
            // Show the errors on the form
            $form.find('.payment-errors').show();
            $form.find('.payment-errors').text(response.error.message);
            $form.find('button').prop('disabled', false);

          } else {
            // token contains id, last4, and card type
            var token = response.id;
            // Insert the token into the form so it gets submitted to the server
            $form.append($('<input type="hidden" name="stripeToken" />').val(token));
            // and re-submit
            $form.get(0).submit();
          }
        };


        $(function() {


          $('#stripeForm').submit(function(e) {

            var $form = $(this);
            // Disable the submit button to prevent repeated clicks
            $form.find('button').prop('disabled', true);
            Stripe.card.createToken($form, stripeResponseHandler);
            // Prevent the form from submitting with the default action
            return false;
          });
        });



    };

    $(document).ready(ready);
    $(document).on('page:load', ready);


   </script>

這是控制器操作（帶有用於調試的 puts 語句）：

def new
        @workshop = Workshop.find(params[:workshop])
        @enrollment = Enrollment.new
    end

    def create
        # Amount in cents
        amount = params[:stripeAmount].to_i * 100
        puts current_user.email
        # Create the customer in Stripe
        customer = Stripe::Customer.create(
          email: current_user.email,
          card: params[:stripeToken]
        )
        puts "&&&&&&&&&customer created&&&&&&&&&"

        # Create the charge using the customer data returned by Stripe API
        charge = Stripe::Charge.create(
          customer: customer.id,
          amount: amount,
          description: 'Rails Stripe customer',
          currency: 'usd'
        )
        puts "&&&&&&&&&charge created&&&&&&&&&"

            @workshop = params[:workshop]

       if charge["paid"] == true
         @enrollment = Enrollment.new(user_id: current_user.id, workshop_id: @workshop)
         puts "&&&&&&&&& enrollment new created &&&&&&&&&"
         if @enrollment.save
            puts "&&&&&&&&& enrollment saved &&&&&&&&&"
            redirect_to thank_you_path + "?workshop=" + @workshop
         else
            flash[:notice] = "Please try again"
         end
       end

        # place more code upon successfully creating the charge
      rescue Stripe::CardError => e
        flash[:error] = e.message
        redirect_to workshop_path(@workshop)
        flash[:notice] = "Please try again"
      end

這是提交表單后的日志：

Started POST "/enrollments" for ::1 at 2015-08-20 16:07:28 -0700
Processing by EnrollmentsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"<redacted>", "number"=>"4242424242424242", "exp-month"=>"12", "exp-year"=>"16", "cvc"=>"123", "stripeAmount"=>"150", "workshop"=>"2", "stripeToken"=>"<redacted>"}
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
<redacted>
&&&&&&&&&customer created&&&&&&&&&
&&&&&&&&&charge created&&&&&&&&&
&&&&&&&&& enrollment new created &&&&&&&&&
   (0.2ms)  begin transaction
  SQL (0.5ms)  INSERT INTO "enrollments" ("user_id", "workshop_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["user_id", 1], ["workshop_id", 2], ["created_at", "2015-08-20 23:07:29.937242"], ["updated_at", "2015-08-20 23:07:29.937242"]]
############### NEW ENROLLMENT CREATED 25 #######################
yay
  Rendered enrollment_mailer/notification_email.html.erb within layouts/mailer (0.4ms)

EnrollmentMailer#notification_email: processed outbound mail in 235.2ms

Sent mail to <redacted>@gmail.com (75.2ms)
Date: Thu, 20 Aug 2015 16:07:30 -0700
From: noreply@<redacted>.com
To: <redacted>@gmail.com
Message-ID: <55d65db22ebf2_136623fc6e02c5dd033956@<redacted>>
Subject: new registration on <redacted>
Mime-Version: 1.0
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

<html>
  <body>
    <html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  </head>
  <body>
    <h1>New Email signup</h1>

  </body>
</html>
  </body>
</html>

&&&&& email sent &&&&&
   (2.6ms)  commit transaction
&&&&&&&&& enrollment saved &&&&&&&&&
Redirected to http://localhost:3000/thank-you?workshop=2
Completed 302 Found in 2245ms (ActiveRecord: 3.3ms)


Started POST "/enrollments" for ::1 at 2015-08-20 16:07:30 -0700
Processing by EnrollmentsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"<redacted>", "number"=>"4242424242424242", "exp-month"=>"12", "exp-year"=>"16", "cvc"=>"123", "stripeAmount"=>"150", "workshop"=>"2", "stripeToken"=>"<redacted>"}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
<redacted>@gmail.com
&&&&&&&&&customer created&&&&&&&&&
&&&&&&&&&charge created&&&&&&&&&
&&&&&&&&& enrollment new created &&&&&&&&&
   (0.1ms)  begin transaction
  SQL (0.3ms)  INSERT INTO "enrollments" ("user_id", "workshop_id", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["user_id", 1], ["workshop_id", 2], ["created_at", "2015-08-20 23:07:31.710257"], ["updated_at", "2015-08-20 23:07:31.710257"]]
############### NEW ENROLLMENT CREATED 26 #######################
yay
  Rendered enrollment_mailer/notification_email.html.erb within layouts/mailer (0.1ms)

EnrollmentMailer#notification_email: processed outbound mail in 5.6ms

Sent mail to <redacted>@gmail.com (12.2ms)
Date: Thu, 20 Aug 2015 16:07:31 -0700
From: noreply@<redacted>.com
To: <redacted>@gmail.com
Message-ID: <55d65db3af982_136623fc6e1cd26603403f@<redacted>-MacBook-Pro.local.mail>
Subject: new registration on <redacted>
Mime-Version: 1.0
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

<html>
  <body>
    <html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  </head>
  <body>
    <h1>New Email signup</h1>

  </body>
</html>
  </body>
</html>

&&&&& email sent &&&&&
   (1.6ms)  commit transaction
&&&&&&&&& enrollment saved &&&&&&&&&
Redirected to http://localhost:3000/thank-you?workshop=2
Completed 302 Found in 1457ms (ActiveRecord: 2.2ms)


Started GET "/thank-you?workshop=2" for ::1 at 2015-08-20 16:07:31 -0700
Processing by EnrollmentsController#thanks as HTML
  Parameters: {"workshop"=>"2"}
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
  Workshop Load (0.1ms)  SELECT  "workshops".* FROM "workshops" WHERE "workshops"."id" = ? LIMIT 1  [["id", 2]]
  Rendered enrollments/thanks.html.erb within layouts/application (4.3ms)
Completed 200 OK in 652ms (Views: 649.0ms | ActiveRecord: 0.2ms)

Answer 1

弄清楚了。 與使用以下代碼提交兩次加載表單的javascript有關：

 $(document).ready(ready);
 $(document).on('page:load', ready);

剛剛刪除了那個和准備好的變量，它都被修復了..非常混亂

Answer 2

你使用任何像 jquery.validate 這樣的驗證插件嗎？ 確保你有：

 $form.submit(function(event) { event.stopImmediatePropagation(); }

因為這里的驗證插件在成功驗證所有字段后也會提交表單。 您也可以嘗試使用submitHandler()而不是.submit()