CODEWITHSUNDEEP
jqueryruby-on-rails
volt
volt

Reputation: 357

If checkbox is checked div appears

Im new to rails/Jquery and I got a problem. My objective is: If the checkbox(credit_card_fields) is checked, the div (credit_card_fields) appears.

This is my script:

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

Form:

<%= form_for(:estudante, :url => {:action => 'create'}) do |f| %>

  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div id="credit_card_fields" style="display:none;">
    <%= f.label :card_number %> <%= f.text_field :card_number %>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>

<% end %>

Upvotes: 2

Views: 99

Answers (3)

max
max

Reputation: 102423

$("#pay_with_card").change(function(){
  $("#credit_card_fields").toggle($(this).is(":checked"));
});
<!-- THIS HTML IS FOR DEMO PURPOSES ONLY! -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>pay_with_card?</label>
<input type="checkbox" name="estudante[pay_with_card]" id="pay_with_card" checked="checked">
<div id="credit_card_fields">
  <label>card_number</label>
  <input type="text" name="estudante[card_number]">
  <label>mail</label>
  <input type="text" name="estudante[mail]">
</div>

Upvotes: 1

Andy
Andy

Reputation: 30135

You forgot the jQuery ready function. Try this:

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can pass argument to .toggle() method:

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

Upvotes: 0

Related Questions