jquery - Disable form button until all field are filled out rails 5.1 -
i have following form , looking solution disable button until form has field out. using rails 5.1, twitter bootsrap , jquery.
<div class="well"> <%= bootstrap_form_for @dup |f| %> <% if current_user.errors.any? %> <div id="error_explanation" class="errors"> <ul> <% current_user.errors.full_messages.each |message| %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <%= f.text_field :title, placeholder: "title here...", label: "title* (required)" %> <%= f.text_field :company_name, placeholder: "company name here...", label: "company name* (required)" %> <%= f.text_area :description, placeholder: "add description here...", label: "description* (required)" %> <%= f.text_field :location, placeholder: "location here...", label: "location* (required)" %> <%= f.collection_select :bus_id, bus.all, :id, :name, include_blank: 'select a', label: "a* (required)"%> <%= f.label "needed" %> <%= f.collection_check_boxes :dup_ids, dup.all, :id, :name, label: (fa_icon 'cogs-o 2x') %> <%= f.fields_for :dups, @g.dups.build |dups_fields| %> <%= skills_fields.text_field :name, label: "add here (optional)", placeholder: "add here..." %> <% end %> <%= f.url_field :url, placeholder: "http://...", label: "url (optional) - must start http://" %> <%= f.hidden_field :company_id, :value => current_user.id unless @job.company_id %> <%= form_tag charges_path %> <article> <% if flash[:error].present? %> <div id="error_explanation"> <p><%= flash[:error] %></p> </div> <% end %> <label class="amount"> <span>amount: <%= pretty_amount(@amount) %></span> </label> </article> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="<%= rails.configuration.stripe[:publishable_key] %>" data-description="a month's subscription" data-amount="<%= @amount %>" data-email="<%= current_user.email %>" data-locale="auto"></script> <% end %> <%= f.submit class: "btn btn-primary btn-outline btn-sm" %> <% end %> </div>
looking jquery solution. how can call rails form tag fields?
if add same class each of fields can count fields class , enable button once filled out:
<script type="text/javascript"> function checkform() { var count = $('.checklist').filter(function() { return $(this).val() !== ""; }).length; var total = $('.checklist').length; if (count == total) { $('.submit-form').removeclass('disabled'); $('.submit-form').removeattr('disabled'); } else { $('.submit-form').addclass('disabled'); $('.submit-form').attr('disabled', 'disabled'); } console.log(count + '/' + total); } $('.checklist').on('keyup', checkform); </script> <%= f.submit class: "btn btn-primary btn-outline btn-sm submit-form disabled", disabled: true %>
but if checkboxes might have adjust count
function.
Comments
Post a Comment