JavaScript breaks in form when I enter text in the form field

Question

I'm trying to create a two stage user on boarding process. First users enter in the business they are in and then add a description. When they click submit, I want to hide that part of the form and show the "Create Account fields"

I'm using Devise and I've created the forms as a nested attribute. I've written the JavaScript code so that it hides the first part of the form but when I enter text in the field, it doesn't work. Here's the code:

application.js

$(document).ready(function () {
    $("#hide").click(function(){
        $(".submit").hide("fast");
    });
    $("#hide").click(function(){
        $("#next").removeClass("hide");
    });
});

devise/registrations/new.html.erb

<div class="box">

  <% resource.submissions.build if resource.submissions.empty? %>
      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>


        <%= f.fields_for :submissions do |submission_form| %>
        <div class="submit">
          <div class="form-group">
            <%= submission_form.label :business, "What industry are you in?" %>
            <%= submission_form.text_field :business, class: "form-control", :autofocus => true  %>
          </div>

          <div class="form-group">
            <%= submission_form.label :description, "Describe your business. Please include a name, URL, and business model." %>
            <br><br>
            <%= submission_form.text_area :description, class: "form-control" %>
          </div>
        </div>
        <% end %>

        <div class="btn btn-lg btn-primary submit" id="hide">Next</div>

      <br>

   <div class="hide" id="next">
    <h2>Create your account.</h2>
      <div class="from-group">
        <%= f.label :name %><br />
        <%= f.text_field :name, class: "form-control", :autofocus => true  %>
      </div>
        <div class="form-group">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: false, class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.label :password %>
          <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %><br />
          <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.label :password_confirmation %><br />
          <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
        </div>

        <div class="form-group">
          <%= f.submit "Sign up", class: "btn btn-primary" %>
        </div>
      </div>
  <% end %>

     <%= render "devise/shared/links" %>
  </div>

I'm having a hard time debugging this as I'm pretty new to JavaScript and Rails. This is my first time writing custom JavaScript in a Rails app so I'm sure I'm missing something simple. Any ideas on what is causing this and how to fix it?

Your sample does not do anything with $(".submit").hide("fast"); What do you want to with that? — Daniel, Dec 15 '15 at 19:41
Hey @daniel when you click the next button it hides everything in the div with class = "submit". So far that works but if I enter in text in the view for that form then it breaks the JS. When you hit the next button, nothing happens. — user3787971, Dec 15 '15 at 22:29
See this CodePen should work: http://codepen.io/anon/pen/QyymQm — Daniel, Dec 16 '15 at 07:49

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

I found the answer to my question. It turns out that turbo links was breaking my Jquery code until I refreshed the page. I found the answer here:

JQuery gets loaded only on page refresh in Rails 4 application

edited May 23 '17 at 12:07

Community

1
1

answered Dec 16 '15 at 14:57

user3787971

457
4
22

JavaScript breaks in form when I enter text in the form field

1 Answers1