订阅选择表单中的不同选项
Different options in subscription selection form
处理一个Rails项目,该项目允许用户注册并选择订阅,该订阅通过Stripe处理。
因此,它的工作原理是他们创建一个帐户(使用Devise),然后将他们路由到一个页面,在那里他们可以选择相同形式的免费计划或高级计划。
我试图实现的是:如果他们选择免费计划,当他们点击提交时,不需要信用卡信息(我在Stripe中没有"免费"计划,所以我不需要担心这种互动)。
如果他们选择了高级计划,我想让应用程序知道他们必须输入信用卡信息,否则就无法通过。
我在这个问题上遵循了Ryan Bates的Railscast,并修改了他的代码以适应我的情况。我相信答案是改变CoffeeScript的形式,但我在这里的技能有点生疏。我尝试了几种不同的解决方案,但都无法实现。很好奇是否有人能让我知道如何以这种方式组织逻辑来实现这一点。
下面文件中的当前结果允许我创建免费订阅,前提是我首先选择并点击提交。如果我选择高级按钮,然后切换回来,它就不起作用了。
我在订阅中的咖啡脚本表单。js.coffee:
jQuery ->
$('#plan_id_2').change ->
if $(this).is(':checked')
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
subscription.setupForm()
else
true
subscription =
setupForm: ->
$('#new_subscription').submit ->
$('input[type=submit]').prop('disabled', true)
subscription.processCard()
false
processCard: ->
card =
number: $('#card_number').val()
cvc: $('#card_code').val()
expMonth: $('#card_month').val()
expYear: $('#card_year').val()
Stripe.createToken(card, subscription.handleStripeResponse)
handleStripeResponse: (status, response) ->
if status == 200
$('#subscription_stripe_card_token').val(response.id)
$('#new_subscription')[0].submit()
else
$('#stripe_error').text(response.error.message)
$('input[type=submit]').prop('disabled', false)
我的订阅表
<h1>Select a plan</h1>
<div class="row">
<%= form_for @subscription, url: user_subscriptions_path, method: :post, html: { class: 'form-horizontal' } do %>
<div class="col-sm-4">
<div class="form-group">
<%= label_tag "Free" %>
<%= radio_button_tag :plan_id, @free_plan.id, false %>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<%= label_tag "Premium" %>
<%= radio_button_tag :plan_id, @premium_plan.id, false %>
</div>
<div id="premium-form">
<%= hidden_field_tag :stripe_card_token %>
<div class="form-group">
<%= label_tag :card_number, "Credit Card Number" %>
<%= text_field_tag :card_number, nil, name: nil %>
</div>
<div class="form-group">
<%= label_tag :card_code, "Security Code on Card (CVV)" %>
<%= text_field_tag :card_code, nil, name: nil %>
</div>
<div class="form-group">
<%= label_tag :card_month, "Card Expiration" %>
<%= select_month nil, {add_month_numbers_true: true}, {name: nil, id: "card_month"}%>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year"}%>
</div>
<div id="stripe_error">
<noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
</div>
</div>
</div>
<div class="row">
<%= submit_tag 'Choose Plan' %>
</div>
<% end %>
</div>
在同样的情况下,当用户选择了一个不需要信用卡信息的选项时,我在表单上调用了.off()。如果他们选择了一个需要信用卡信息的选项,您可以再次调用setupForm。我不知道Coffeescept,但这是一个大致的想法:
$('#whateveryourfeeplanselectoris').change ->
if $(this).is(':checked')
$('#form-selector').off();
// you could also hide the credit card entry here as well
else
subscription.setupForm()
// unhide credit card entry if you hide it above
相关文章:
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目