2

このチュートリアルを使用して Rails 3 で設定したマルチステップ フォームがあります: http://railscasts.com/episodes/217-multistep-forms

「続行」ボタンと「戻る」ボタンをそれぞれクリックして、フォームの次のステップと前のステップに進むことができます。

フォームの最終ページに Stripe 経由で支払いフォームを挿入しました。これには、coffeescript で次の jQuery が必要です。

videos.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」ボタンを参照しているためです。

フォームのこの最終ページの「続行」送信ボタンに「#uploadsubmit」という ID を割り当てて、戻るボタンを再び使用できるようにします。jQuery coffeescript でこの ID を参照するにはどうすればよいですか?

4

1 に答える 1

3

jQueryがすべてのボタンを参照しているのではなくsubmit、フォームのイベントにバインドしています。続行ボタンを具体的に識別し、そこにカード処理を追加した場合、他の手段（「Enter」ボタンを押すなど）によってトリガーされたフォーム送信を見逃すことになります。

実行できる必要があるのは、どの送信ボタンがクリックされたかを判別することです。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
于 2012-08-12T17:38:06.833 に答える