javascript - 如何在 coffeescript、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 coffeescript 中引用此 ID？

Answer 1

并不是 jQuery 引用了所有按钮，而是它绑定(bind)到表单的 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 类。提交时，会找到按钮，如果不是后退按钮，您可以继续处理卡片。然后删除“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