2

我使用本教程在 rails 3 中设置了一个多步骤表单：http ://railscasts.com/episodes/217-multistep-forms

通过分别单击“继续”和“返回”提交按钮，我可以进入表单中的下一步和上一步。

我已经在表单的最后一页通过 Stripe 插入了支付表单，这需要在 coffeescript 中使用以下 jQuery：

视频.js.coffee

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  video.setupForm()

video =
  setupForm: ->
    $('#new_video').submit ->
      if $('#card_number').length
        video.processCard()
        false
      else
        true

所以这就是我遇到的问题。我的表单最后一页的所有内容都有效，除了“返回”按钮，它的作用就像我点击“继续”一样。这显然是因为 jQuery 引用了表单上的所有“.submit”按钮。

我想为表单最后一页上的“继续”提交按钮分配一个 ID“#uploadsubmit”，以便我可以再次使用后退按钮。如何在 jQuery 咖啡脚本中引用这个 id？

4

1 回答 1

3

不是 jQuery 引用所有按钮，而是它绑定到submit表单的事件。如果您专门识别了继续按钮并在那里添加了您的卡片处理，您将错过由其他方式触发的表单提交（如按下“输入”按钮）。

您需要做的是确定单击了哪个提交按钮。有一些方法可以在没有 jQuery 的情况下做到这一点，但它们不是跨浏览器友好的。但是，您可以使用 jQuery 轻松地做到这一点，方法是标记被单击的按钮，例如添加一个类。

$('#new_video input:submit').click ->
  $(this).addClass('wasclicked')

$('#new_video').submit ->
  clickedBtn = $(this).find('.wasclicked')

  if clickedBtn.attr('name') !== 'back_button' && $('#card_number').length
    video.processCard()
    clickedBtn.removeClass('wasclicked')
    false
  else
    true

因此，当单击按钮时，它会被标记为.wasclicked类。提交时，会找到按钮，如果不是后退按钮，您可以继续处理卡片。然后删除“被点击”按钮（以防信用卡处理失败等）。

您也可以只存储单击的名称并避免使用类，这样的事情应该可以工作：

clickedName = null

$('#new_video input:submit').click ->
  clickedName = $(this).attr('name')

$('#new_video').submit ->
  if clickedName !== 'back_button' && $('#card_number').length
    video.processCard()
    clickedName = null
    false
  else
    true
于 2012-08-12T17:38:06.833 回答