Question

I have a multi-step form that I set up in rails 3 using this tutorial: http://railscasts.com/episodes/217-multistep-forms

I can progress to the next and previous steps in the form by clicking the “continue” and “back” submit buttons, respectively.

I’ve plugged in a payment form via Stripe on the final page of the form, and this requires the following jQuery in coffeescript:

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

So here’s the problem I’m having. Everything with the final page of my form works except for the “back” button, which acts as though I’m clicking “continue”. This is clearly because the jQuery is referencing all the “.submit” buttons on the form.

I want to assign an id, “#uploadsubmit” to the “continue” submit button on this final page of the form, so that I can use the back button again. How do I reference this id in the jQuery coffeescript?

Answer 1

It’s not that jQuery is referencing all the buttons, but rather it’s binding to the submit event of the form. If you ID’d the continue button specifically and added your card processing there, you’d miss form submissions triggered by other means (like pressing the “enter” button).

What you need to be able to do is determine which submit button was clicked. There are ways to do this without jQuery, but they’re not cross-browser friendly. You can do it with jQuery easily, however, by marking the button that was clicked, e.g. by adding a class.

$('#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

So when a button is clicked, it gets marked with the .wasclicked class. On submit, the button is found, and if it’s not the back button you can go ahead and process the card. The ‘wasclicked’ button is then removed (in case the credit card processing fails, etc).

You could also just store the clicked name and avoid using classes, something like this should work:

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