show rest of a form if a checkbox is ckecked in ruby on rails

Question

I need to ask to my user if will pay a service with credit card...if it checked the option pay_with_card? it must show the rest of the form, that ask for other data like card number, mail, etc. if the user don't checked it, it must show a message, the question is...how can I do this? thanks in advance

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div>
    <%= f.label :card_number %> <%= f.text_field :card_number %>
  </div>  
  <div>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>

Unixmonkey · Accepted Answer · 2012-04-25T20:16:51.297

11

Make the card number/mail details div style="display:none;", then add some javascript to the checkbox to change it to display:block;

Something like this:

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div id="card_details" style="display:none;">
    <%= f.label :card_number %> <%= f.text_field :card_number %>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>
<script type="text/javascript">
  var checkbox = document.getElementById('product_pay_with_card');
  var details_div = document.getElementById('card_details');
  checkbox.onchange = function() {
     if(this.checked) {
       details_div.style['display'] = 'block';
     } else {
       details_div.style['display'] = 'none';
     }
  };
</script>

edited Apr 25 '12 at 20:16

answered Apr 25 '12 at 19:43

Unixmonkey

18,485
7
55
78

thanks @Unixmonkey, it show just the pay_with_card? if the user press it should show the rest of the form but it doesn´t, of course I'm doing something wrong...please guide me :) – suely Apr 25 '12 at 20:07
Oh, because of the way rails adds id's to the form elements, it should be var checkbox = document.getElementById('product_pay_with_card'); – Unixmonkey Apr 25 '12 at 20:16
thanks for your answer but in the code that you post...is as you said, but the code var checkbox...etc must be in assets/javascript/application.js ???????? – suely Apr 25 '12 at 20:24
It doesn't have to be in application.js, but it certainly could go there. It depends on how you like to organize your javascript code. I tag my body with data attributes for controller and action, and in my document.ready, I determine what JS file to load, and function to execute, but everyone does it differently. You didn't specify, so I went with vanilla JS, but you could use makaroni4's code if you have jQuery loaded, and user1047843's if you are using coffeescript. – Unixmonkey Apr 25 '12 at 21:54
@suely Check this question for more help with where to put your javascript: http://stackoverflow.com/questions/3437585/best-way-to-add-page-specific-javascript-in-a-rails-3-app – Unixmonkey May 01 '12 at 16:58
I figure it out, thanks, and also answerd my own question, thanks for your help! – suely May 02 '12 at 17:55

score 9 · Answer 2 · answered Apr 25 '12 at 19:47

9

How about using jQuery?

First, wrap your credit card fields in a div with class credit_card_fields and than add this JS code to your page:

$("input[type='checkbox']#pay_with_card").on('change', function(){
  $('.credit_card_fields').toggle();
});

answered Apr 25 '12 at 19:47

makaroni4

2,281
1
18
26

score 1 · Answer 3 · answered Apr 25 '12 at 19:40

1

You can use JS for it or move pay_with_card out of form like:

<%= link_to 'pay with card', your_current_path(:pay_with_card => 1) %>
<%= form_for(...) do |f| %>
  <% if params[:pay_with_card] %>
    <%= # fields for card %>
  <% end %> 
<% end %>

answered Apr 25 '12 at 19:40

Ian Bernatcki

108
1
10

score 1 · Answer 4 · answered Apr 25 '12 at 19:44

You can do it through jQuery, for example:

$ ->
  $('select#pay_with_card').change ->
    if $(this).val() == 'yes'
      $('.card_block').slideDown('fast')
    else
      $('.card_block').slideUp('fast')

assumed that part of the form with payment card is included in the div with .card_block class

score 0 · Answer 5 · answered Apr 27 '12 at 15:59

Ok my solution is this: all the code in the view, if a user check pay_with_card...(mi code is in spanish) it shows the complete form...if is not checked don´t show nothing, just the same checkbox asking for payment... thanks guys.

function mostrar (){
var checkbox = document.getElementById('chk_tarjeta');
if (checkbox.checked)
document.getElementById("card_details").style.display = "block";
else
document.getElementById("card_details").style.display = "none";
</script>

<h1>Forma de Pago</h1>
<%= form_for(@product) do |f| %>
<div id="product_pay_with_card">
<div >
<%= f.label :paga_con_tarjeta? %></br>
<%= f.check_box :paga_con_tarjeta, :id => "chk_tarjeta", :onclick => "mostrar();" %>
<div>
</div>
</div>
<div id="card_details" >
<div>
<%= f.label :numero_de_tarjeta %></br>
<%= f.text_field :numerotarjeta %>
</div>
<div>
<%= f.label :codigo_de_seguridad %></br>
<%= f.text_field :codigoseguridad %>
</div>

gl3yn · Answer 6 · 2020-11-17T08:16:09.450

This worked for me with a form_with model and bootstrap
Change my_hidden_form with an id that makes sense for your form.
Original code is haml

= form_with scope: :model, url: models_path, local: true do |form|
            .row
              .col-6
                .form-group
                  %h5.mb0 THE CASE TO TICK
                  = form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }}

            .row
              .col-6
                .form-group.collapse#my_hidden_form
                  %h5.mb0 THE FORM TO SHOW WHEN CASE IS TICKED
                  = form.text_field :name, placeholder: "A name"

            .row
              .col-md-12.text-right
                = form.submit 'Submit', class: "btn btn-primary"

Converted to erb/html with https://haml2erb.org/

<%= form_with scope: :model, url: models_path, local: true do |form| %>
<div class="row">
  <div class="col-6">
    <div class="form-group">
      <h5 class="mb0">THE CASE TO TICK
        <%= form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }} %>
      </h5>
    </div>
  </div>
</div>
  <div class="row">
    <div class="col-6">
      <div class="form-group collapse" id="my_hidden_form">
        <h5 class="mb0">THE FORM TO SHOW WHEN CASE IS TICKED
          <%= form.text_field :name, placeholder: "A name"  %>
        </h5>
      </div>
    </div>
  </div>
<div class="row">
  <div class="col-md-12 text-right">
    <%= form.submit 'Submit', class: "btn btn-primary" %>
    </div>
  </div>
<% end %>

score 0 · Answer 7 · answered Apr 22 '21 at 13:01

Since the approach suggested by @Unixmonkey didn't work for me, here's a slight variation I put together using an event listener.

<script type="text/javascript">
const checkbox = document.getElementById('product_pay_with_card');
const details_div = document.getElementById('card_details');

checkbox.addEventListener("change", (event) => {
  if (event.currentTarget.checked) {
    details_div.style['display'] = 'block';
  }
  else {
    details_div.style['display'] = 'none';
  }
});
</script>

show rest of a form if a checkbox is ckecked in ruby on rails

7 Answers7

Linked