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

How to id a submit button in coffeescript, Rails 3 app?

本文关键字：按钮 Rails 应用程序 提交 识别 咖啡 脚本      更新时间：2023-09-26

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

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

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

视频.js.咖啡 

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？

并不是

说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类。 提交时，将找到该按钮，如果不是后退按钮，则可以继续处理该卡。 然后删除"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
相关文章：