Многоступенчатая форма Javascript в Rails 4 - Невозможно отправить форму

Question

Моя форма Rails отлично работает, прежде чем я реализую решение javascript для многоступенчатой ​​формы, найденной здесь. http://www.jqueryscript.net/form/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3.html

Он отлично работает, но в конце он не будет отправлять/хранить данные. Какие-либо предложения? Вот файл .form.html.erb.

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

На данный момент в коде JS:

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

Вам нужно реализовать функциональные возможности представить. Что-то вдоль линий (с использованием CoffeeScript):

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

Естественно, это предполагает, что вы установили значение url.

Таким образом, ваш код будет в конечном итоге выглядеть примерно так (опять же, в CoffeeScript ... вам придется конвертировать обратно в регулярные JS):

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

Как как установить URL, в вашей версии, отличной от js, какой URL-адрес вы задаете на кнопке отправки?