Javascript multi-step form in Rails 4 - Can't submit the form

Question

My Rails form works fine before I implement a javascript solution to a multi-step form found here. http://www.jqueryscript.net/form/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3.html

It works fine, but it won't submit/store the data in the end. Any suggestions? Here's the .form.html.erb file.

 $(function() { //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50)+"%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'transform': 'scale('+scale+')'}); next_fs.css({'left': left, 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function(){ if(animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({opacity: 0}, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1-now) * 50)+"%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({'left': left}); previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); }, duration: 800, complete: function(){ current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function(){ return false; }) }); 

 CSS File /*form styles*/ #msform { width: 100%; text-align: center; position: relative; } #msform fieldset { background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; /*stacking fieldsets above each other*/ position: relative; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } /*inputs*/ #msform input, #msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 13px; } /*buttons*/ #msform .action-button { width: 100px; background: #27AE60; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; } /*headings*/ .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: white; text-transform: uppercase; font-size: 9px; width: 25%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white; } 

 .form.html.erb <%= form_for(@journey, :remote=> true) do |f| %> <% if @journey.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@journey.errors.count, "error") %> prohibited this journey from being saved:</h2> <ul> <% @journey.errors.full_messages.each do |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <fieldset> <div class="form-group"> <h2>STEP 1: Add an image for the journey</h2> <%= f.file_field :image, class: "btn btn-primary" %><br> <%= f.label :remote_image_url, "or paste image URL here" %><br /> <%= f.text_field :remote_image_url, class: "form-control" %> </div> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <div class="form-group"> <h2>STEP 2: Describe the journey</h2> <%= f.label :name, "1. Add a catchy name to make your journey stand out." %> <%= f.text_area :name, class: "form-control" %> <br> <%= f.label :description, "2. Add 2-3 tags to describe your journey (eg, hungry, hipster, nighttime)" %> <%= f.text_area :description, class: "form-control" %> </div> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <div class="form-group"> <h2>STEP 3: Add Clues</h2> <%= f.fields_for :clues do |builder| %> <%= render 'clue_fields', f:builder %> <% end %> <%= link_to_add_fields "Add Another Clue", f, :clues, class: "btn btn-primary" %> </div> <input type="button" name="previous" class="previous action-button" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next" /> </fieldset> <fieldset> <div class="form-group"> <h2>STEP 4: Rate the difficulty from 1-5</h2> <%= f.number_field :difficulty, class: "form-control" %> </div> <input type="button" name="previous" class="previous action-button" value="Previous" /> <%= f.submit %> </fieldset> <% end %> 

Answer 1

At this point in the js code:

$(".submit").click(function(){
  return false;
})

You need to implement your submit functionality. Something along the lines of (using coffeescript):

jqxhr = $.post(
  url
  (data, textStatus, jqXHR) -> 
    console.log 'i guess it worked'
)
jqxhr.fail ->
  console.log jqxhr.responseText 

Naturally, this assumes you have set the url value.

So, your code would end up looking something like this (again, in coffeescript... you'll have to convert back to regular js):

$(".submit").click ->
  jqxhr = $.post(
    url
    (data, textStatus, jqXHR) -> 
      console.log 'i guess it worked'
  )
  jqxhr.fail ->
    console.log jqxhr.responseText 

As to how the set the URL, in your non-js version, what URL do you set on the submit button?