如何在咖啡脚本，Rails 3 应用程序中识别提交按钮？

Question

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

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

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

videos.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？

Answer 1

并不是 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