如何同时提交两份表格或将两份表格合并为一份

Question

我有一个看起来像这样的表单：

这是我对两种形式的梳理。

我被告知只需将ChargesController中的创建方法放入OrderController中，但问题是ChargesForm需要javascript，因为令牌需要"id="payment_Form"来发送API。因此，需要有一种方法来通过Ruby语法或javascript组合两种形式。

理想情况下，我希望它能这样工作。。。

如果费用表提交成功，则提交订单表。

<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>

不知怎么的，我需要把最上面的两行合并为一行。我所有的尝试都失败了。

有什么建议吗？

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

条带元素的JavaScript表单：

<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所指出的，我认为您想要的是在不使用<form>封闭标记的情况下从listing和order对象生成字段。

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

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