Question

我在Stripe的一页上有多个html POST表单。问题是我只能在页面上发布最后一个表单。如果我尝试提交前一个表单，则由于页面上的最后一个表单未填写而无法正常工作，并给我（前端）错误。

例如单页表格：

<%= form_for(@order, url: listing_orders_path([@listing, @listing_video]), html: {id: "payment_form"} ) do |form| %>

  <div class="form-group">
    <%= form.label :name, "Your Name" %>
    <%= form.text_field :name, class: "form-control" %>
  </div>
  <%= form.hidden_field :order_type, value: "video" %>
  <script

    src="https://js.stripe.com/v3/">

  </script>
    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div id="card-element" class="form-control">
      </div>
      <div id="card-errors" role="alert"></div>
    </div>
      <br>
      <div class="form-group">
    <%= form.submit "Create Order"} %>
  </div>
  <span class="token"></span>
  <% end %>

<%= form_for(@order, url: listing_orders_path([@listing, @listing_video]), html: {id: "payment_form-a"} ) do |form| %>

  <div class="form-group">
    <%= form.label :name, "Their Name" %>
    <%= form.text_field :name, class: "form-control" %>
  </div>

  <%= form.hidden_field :order_type, value: "video" %>

  <script

    src="https://js.stripe.com/v3/">

  </script>
        <div class="form-row">
      <label for="card-element-a">
        Credit or debit card
      </label>
      <div id="card-element-a" class="form-control">
      </div>
      <div id="card-errors" role="alert"></div>
    </div>
      <br>
      <div class="form-group">
    <%= form.submit "Create Order" %>
  </div>
  <span class="token"></span>
  <% end %>
<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>

这是stripe.js文件：

var stripe = Stripe('pk_test_xxxxxxxxxxxx');

var elements = stripe.elements();

var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

var card = elements.create('card', {style: style});

card.mount('#card-element');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment_form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server
      stripeTokenHandler(result.token);
    }
  });
});

  function stripeTokenHandler(token) {

    var form = document.getElementById('payment_form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    form.submit();
  }

  function addFieldToForm(form, token, field) {
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', "user[card_" + field + "]");
    hiddenInput.setAttribute('value', token.card[field]);
    form.appendChild(hiddenInput);
  }

stripe-a.js文件相同，但是payment-form更改为payment-form-a，而card-element更改为card-element-a。

我尝试在“提交”按钮中使用value: "payment_form"，但并没有区别（我读到这会有所帮助）

有人对在同一页面上允许多个HTML POST表单以及只允许提交提交的表单有其他建议吗？

一页上具有多个stripe.js文件的多个HTML表单？

0 个答案: