如何一次提交两张表格或将两张表格合二为一？

Question

我有一个如下所示的表单：

这是我对两种形式进行组合的尝试。

有人告诉我只需将 ChargesController 中的 create 方法扔到 OrderController 中，但问题是 Charges Form 需要 javascript，因为令牌需要 "id="payment_form" 来发送 API。所以需要有一种方法通过 Ruby 语法或可能通过 Javascript 组合这两种形式。

理想情况下，我希望它像这样工作......

如果 Charges 表单提交成功，则提交 Orders Form。

 <form id="form-element" action="/charges" method="post" id="payment_form">


    <%= form_for([@listing, @order]) do |form| %>


      <% if @order.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@order.errors.count, "error") %> prohibited this order from being saved:</h2>

          <ul>
          <% order.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>

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

      <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">
            <!-- a Stripe Element will be inserted here. -->
          </div>

          <!-- Used to display form errors -->
          <div id="card-errors" role="alert"></div>
        </div>
          <br>
          <div class="form-group">

        <%= form.submit "asdf", class:"ripple-effect", id:"button-element" %>
      </div>

      <span class="token"></span>
      </form>
      <% end %>
      </div>
      <script>

       ....
    </script>

不知何故，我需要将前两行合二为一。我所有的尝试都失败了。

有什么建议吗？

对于任何想知道我为什么要标记条纹和 javascript 的管理员 - 是因为我认为 javascript 可能是完成此任务的一种方式，也许使用过条纹的人也有这些相同的任务。

JavaScript for ths Stripe 元素表单：

  <script>





  // Create a Stripe client.
  var stripe = Stripe('pk_test_25726263432532454320B8');

  // Create an instance of Elements
  var elements = stripe.elements();

  // Custom styling can be passed to options when creating an Element.
  // (Note that this demo uses a wider set of styles than the guide below.)
  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'
    }
  };

  // Create an instance of the card Element
  var card = elements.create('card', {style: style});

  // Add an instance of the card Element into the `card-element` <div>
  card.mount('#card-element');

  // Handle real-time validation errors from the card Element.
  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Handle form submission
  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) {
      // Insert the token ID into the form so it gets submitted to the server
      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);

      //

      ["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {
         addFieldToForm(form, token, field);

      //
    });

      // Submit the form
      form.submit();
    }



  </script>

更新：

添加了这些更改：

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

将此添加到 JavaScript：

    $('#Orders').on('submit', function(event) {
      event.preventDefault();
      $.ajax({
          type: "POST",
          url: "/charges",
          data: $('#payment_form').serialize()
      }).then(this.submit.bind(this));
  });

Answer 1

我不是 Rails 专家，但正如 @Charlietfl 指出的那样，我认为您想要的是从 listing 和 order 对象生成字段，而不使用 <form> 封闭标签。

我使用了我的google-fu，而不是使用form_for0 或select_tag1。

在这种情况下，您将只有一个带有 Stripe 信用卡元素的表单。