Question

提交braintree付款表单后，我使用.html（）替换旧表单并插入新表单。表格插入正确，但当我填写并点击提交时，没有任何反应。服务器日志或Chrome开发人员工具（在“网络”或“控制台”选项卡中）中没有任何活动。任何关于为什么会出现这种情况/问题的帮助都会很棒。谢谢！

Braintree形式：

<div id="braintree_<%= order.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Payment for <%= order.name %></h3>
</div>
<div class="modal-body" id="braintree_body_<%= order.id %>">
<%= render 'orders/order_cc_charge', order: order %>
<% total = order.projected_total %>
<% if order.payments.present? %>
  <table class="table table-hover table-condensed table-bordered">
    <thead>
      <th>Payment $</th>
      <th>Notes</th>
      <th>Balance</th>
    </thead>
    <% order.payments.each do |payment| %>
    <% total -= payment.amount %>
    <tbody>
      <tr>
        <td><%= number_to_currency(payment.amount) %></td>
        <td><%= payment.notes %></td>
        <td><%= number_to_currency(total) %></td>
      </tr>
    </tbody>
    <% end %>
  </table>
<% end %>
  <%= form_tag create_transaction_url, remote: true, id: "braintree-payment-form_#{order.id}" do %>
    <div class="input-prepend">
      <span class="add-on"> <i class="fa fa-usd"> </i> </span>
      <%= text_field_tag :amount, total.round(2), class: "input-small" %>
      <%= hidden_field_tag :order_id, order.id %>
    </div>
      <input type="text" size="20" autocomplete="off" data-encrypted-name="number" placeholder="Card #" />
      <input type="text" size="4" autocomplete="off" data-encrypted-name="cvv" class="input-mini" placeholder="CVV" />
    <p>
      <label class="inline bold">Expiration Date</label>
      <input type="text" size="2" name="month" class="input-small" placeholder="Month (MM)" /> / <input type="text" size="4" name="year" class="input-small" placeholder="Year (20XX)" />
    </p>
    <%= text_area_tag :notes, nil, placeholder: "Notes", class: "span10" %>
</div>
<div class="modal-footer" id="braintree_footer_<%= order.id %>">
  <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  <button type="submit" id="submit" class="btn btn-primary">Submit Payment</button>
  <% end %>
</div>

<script src="https://js.braintreegateway.com/v1/braintree.js"></script>
<script>
  var braintree = Braintree.create('<%= j(ENV['CSE_KEY']) %>');
  braintree.onSubmitEncryptForm('braintree-payment-form_<%= order.id %>');
</script>
</div>

<script>
  $('#braintree_<%= order.id %>').on('show', function () {
    $("#trucks_refresh").remove();
  });
  $('#braintree_<%= order.id %>').on('hide', function () {
    if ($("#trucks_refresh").length) {
    }
    else {
      $(document.body).append('<%= j(render 'deliveries/trucks_refresh_btn') %>');
    }
  });
</script>

控制器操作：

def create_transaction
  result = Braintree::Transaction.sale(
    :amount => params[:amount],
    :credit_card => {
      :number => params[:number],
      :cvv => params[:cvv],
      :expiration_month => params[:month],
      :expiration_year => params[:year]
    },
    :options => {
      :submit_for_settlement => true
    }
  )

  @order = Order.find(params[:order_id])
  if result.success?
    @payment = Payment.create(order_id: @order.id, amount: params[:amount], date_received: Date.today, job_id: @order.job_id, client_id: @order.client_id, method: "2", notes: params[:notes])
    "<h1>Success! Transaction ID: #{result.transaction.id}</h1>"
  else
    "<h1>Error: #{result.message}</h1>"
  end
  respond_to do |format|
    format.js
  end
end

JS行动：

$("#braintree_<%= @order.id %>").html('<%= j(render 'deliveries/braintree_modal_body', order: @order) %>');

Answer 1

我在1 div内移动了表单，现在表单工作正常。我想在2个不同的div中分割表单不允许提交按钮在初次提交后正确提交表单。

<%= form_tag create_transaction_url, remote: true, id: "braintree-payment-form_#{order.id}" do %>
    <div class="input-prepend">
      <span class="add-on"> <i class="fa fa-usd"> </i> </span>
      <%= text_field_tag :amount, total.round(2), class: "input-small" %>
      <%= hidden_field_tag :order_id, order.id %>
    </div>
      <input type="text" size="20" autocomplete="off" data-encrypted-name="number" placeholder="Card #" class="input-medium" />
      <input type="text" size="4" autocomplete="off" data-encrypted-name="cvv" class="input-mini" placeholder="CVV" />
      <input type="text" size="2" name="month" class="input-small" placeholder="Month (MM)" /> / <input type="text" size="4" name="year" class="input-small" placeholder="Year (20XX)" />
    <%= text_area_tag :notes, nil, placeholder: "Notes", class: "span12" %>
    <%= button_tag "Submit Payment", class: "btn btn-primary btn-block btn-large", type:"submit", id:"submit" %>
  <% end %>
<script>
  var braintree = Braintree.create('<%= j(ENV['CSE_KEY']) %>');
  braintree.onSubmitEncryptForm('braintree-payment-form_<%= order.id %>');
</script>

将表单插入HTML后不提交表单

1 个答案: