How to automatically submit all forms with checked check_box?

Question

A user is given the command "Choose 5 Inspirations"

A list of 20+ inspirations are shown.

There is a check_box on the top right hand corner of each inspirational panel.

<% @inspirations.each do |inspiration| 
  <%= simple_form_for(current_user.inspirations.build) do |f| %>
    <%= f.check_box :check %>
    <%= inspiration.name %>
  <% end %>
<% end %>

<script>
  # How to make script where once a 5th check_box is checked then submit all forms with :check automatically?
  # Below is work in progress...
  $(function () {
    $('input[type=checkbox]').is(':checked').length;
    form.submit();
  })
</script>

What javascript is needed to make this work?

UPDATE

fast_track_one.html.erb

<%= simple_form_for(current_user.inspirations.build) do |f| %>
  <% @inspirations.each do |inspiration| %>
    <%= check_box_tag 'inspiration_ids[]', inspiration.id %>
    <%= inspiration.name %>
  <% end %>
  <% f.submit %>
<% end %>

<script>
    $(document).on('click', 'input[name="inspiration_ids[]"]', function() {
      var count = $('input[name="inspiration_ids[]"]:checked').length;
      if (count === 5) {
        $('#new_inspiration').trigger('submit.rails');
      }
    });
</script>

inspirations_controller.rb

class InspirationsController < ApplicationController
  respond_to :html, :json
  before_action :set_inspiration, only: [:show, :like]
  before_action :correct_user, only: [:edit, :update, :destroy]

  def fast_track_one
    @suggestions_user = User.find(1)
    @inspirations = @suggestions_user.inspirations
    if params[:inspiration_ids].present? && params[:inspiration_ids].size == 5
      @inspirations = Inspiration.where(id: params[:inspiration_ids])
      @inspirations.each do |inspiration|
        current_user.inspirations << inspiration
      end
    end
  end

  def index
    if params[:tag]
      @inspirations = Inspiration.tagged_with(params[:tag])
    else
      @inspirations = current_user.inspirations.order("created_at DESC") if current_user.inspirations.present?
    end
  end

  def show
    @commentable = @inspiration
    @comments = @commentable.comments
    @comment = Comment.new
    @notable = @inspiration
    @notes = @notable.notes
    @note = Note.new
    if current_user
      @correct_user = current_user.inspirations.find_by(id: params[:id])
    else
      @correct_user = nil
    end
  end

  def new
    @suggestions_user = User.find(21) #1 in Development
    @inspirations = @suggestions_user.inspirations.top_6
    @maximum_length = Inspiration.validators_on( :name ).first.options[:maximum]
    existing_inspiration = Inspiration.find_by_id params[:inspiration_id]
    if existing_inspiration
      @inspiration = existing_inspiration.dup
    elsif params[:inspiration].try(:[], :name)
      @inspiration = Inspiration.new(inspiration_params) 
    else
      @inspiration = current_user.inspirations.build
    end
    respond_modal_with @inspiration
  end

  def edit
    @suggestions_user = User.find(21)
    @maximum_length = Inspiration.validators_on( :name ).first.options[:maximum]
    @inspirations = @suggestions_user.inspirations.order("created_at DESC")
    existing_inspiration = Inspiration.find_by_id params[:inspiration_id]
    if existing_inspiration
      @inspiration = existing_inspiration.dup
      @inspiration.image_file_name = existing_inspiration.image_file_name
    end
    respond_modal_with @inspiration
  end

  def create
    #@suggestions_user = User.find(21)
    #@inspirations = @suggestions_user.inspirations.order("created_at DESC")
    if current_user == nil
      # If there is no user, store the lifetime values to the session.
      session[:inspiration_name] = inspiration_params[:name]
      session[:inspiration_image] = inspiration_params[:image]
      redirect_to signup_path
    else
      #@inspiration.image_remote_url = params[:inspiration_image]
      @inspiration = current_user.inspirations.build(inspiration_params)
      if @inspiration.conceal == true
        @inspiration.save
        if current_user.inspirations.count < 5
          redirect_to root_url
        else
          respond_modal_with @inspiration
        end
        flash[:info] = 'INSPIRATION SECRETLY SAVED. YOUR INSPIRATIONS ARE RANDOMIZED ON YOUR HOME PAGE TO GIVE YOU A FRESH SPARK OF INSPIRATION - EVERY TIME!'
      elsif
        @inspiration.save
        track_activity @inspiration
        if current_user.inspirations.count < 5
          redirect_to root_url
        else
          respond_modal_with @inspiration
        end
        flash[:info] = 'INSPIRATION SAVED. YOUR INSPIRATIONS ARE RANDOMIZED ON YOUR HOME PAGE TO GIVE YOU A FRESH SPARK OF INSPIRATION - EVERY TIME!'
      else
        respond_modal_with @inspiration
      end
    end
  end

  def update
    if @inspiration.update(inspiration_params)
      respond_modal_with @inspiration, location: root_path
      flash[:info] = 'INSPIRATION UPDATED'
    else
      respond_modal_with @inspiration
    end
  end

  def destroy
    @inspiration.destroy
    redirect_to root_path
    flash[:alert] = 'INSPIRATION DELETED'
  end

  def like
    if current_user
      @inspiration_like = current_user.inspiration_likes.build(inspiration: @inspiration)
      if @inspiration_like.save
        @inspiration.increment!(:likes)
        flash[:info] = 'THANKS FOR LIKING!'
      else
        flash[:alert] = 'TWO MANY LIKES!'
      end  
        redirect_to(:back)
    else 
      redirect_to root_path
      flash[:alert] = "PLEASE SIGN IN FIRST"
    end
  end

private

  def set_inspiration
    @inspiration = Inspiration.find(params[:id])
    #redirect_to root_url unless @inspiration.user_id == current_user.id or @inspiration.conceal == false
  end

  def correct_user
    @inspiration = current_user.inspirations.find_by(id: params[:id])
    redirect_to root_url, notice:  "NOT AUTHORIZED TO INSPIRATION" if @inspiration.nil?
  end

  def inspiration_params
    params.require(:inspiration).permit(:name, :image, :conceal, :tag_list, :content, :commentable, :comment, :like, :check, :image_file_name, :image_content_type, :image_file_size, :image_updated_at)
  end
end

Answer 1

Use a rails form helper for a check box tag.

<%= simple_form_for(current_user.inspirations.build) do |f| %>
  <% @inspirations.each do |inspiration| 
    <%= check_box_tag 'inspiration_ids[]', inspiration.id %>
    <%= inspiration.name %>
  <% end %>
  <% f.submit %>
<% end %>

Access in the controller with:

if params[:inspiration_ids].present? && params[:inspiration_ids].size == 5
  @inspirations = Inspiration.where(id: params[:inspiration_ids])
  @inspirations.each do |inspiration|
    current_user.inspirations << inspiration
  end
end

Javascript:

$(document).on('click', 'input[name="inspiration_ids[]"]', function() {
  var count = $('input[name="inspiration_ids[]"]:checked').length;
  if (count === 5) {
    $('#new_inspiration').trigger('submit.rails');
  }
});

Answer 2

Your actual code was as below:

<% @inspirations.each do |inspiration| # this line should be inside simple_form_for tag
  <%= simple_form_for(current_user.inspirations.build) do |f| %>
    <%= f.check_box :check %>
    <%= inspiration.name %>
  <% end %>
<% end %>

which generate form multiple times, instead of your code replace below code which generates only one form with multiple checkboxes.

So here is the final code with JS. Hope this will solve your issue.

<%= simple_form_for(current_user.inspirations.build) do |f| %>
    <% @inspirations.each do |inspiration| 
        <%= f.check_box :check %>
        <%= inspiration.name %>
    <% end %>
<% end %>

<script>
  $(document).on('change', 'input[type=checkbox]', function() {
    if ($('input[type=checkbox]').is(':checked').length == 5) {
       $('form').submit(); // form should be selected as DOM element or form id or form class like: $('.fomaClass') or $('#formId')
    }
  });
</script>

Refer check_box API doc form set value in a checkbox, So when you submit the form you will get the value.

Answer 3

Maybe you could try something like this:

<script>
  $(document).on('change', 'input[type=checkbox]', function() {
    if ($('input[type=checkbox]').is(':checked').length == 5) {
       $('form').submit(); // form should be selected as DOM element
    }
  })
</script>