CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railssimple-form
Samah
Samah

Reputation: 43

JQuery can't show hidden element (checkbox) after .show()

Right now I'm solving one huge mystery why JQUery don't show my hidden input in my RoR web application. This code may not be alright (I'm very new to JQuery or JS) but I wonder why it won't show my hidden element but change the label with the logic I want even though it's in the same code block.

Do you have any reasonable explanation why checkbox.show(); won't show the element? Do I have to select the checkbox with different selector or something like that? JQuery code:

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.val("0");
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }
      });
  });

That checkbox is generated thanks to the simple_form gem so it look's like this = f.input :halfday, label: "Is this a halfday event?", :default => false and generated http is: 

<div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
    <label class="boolean optional checkbox" for="event_halfday">
        <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />Is this a halfday event?</label>
</div>
</div>

Thanks for any responses and for your time. Have a nice day!

Upvotes: 3

Views: 1925

Answers (7)

Samah
Samah

Reputation: 43

So I have solved this problem with this code:

$(document).ready(function () {
var checkbox = $('#event_halfday');
$('#others #event_start_at').datepicker().on('changeDate', function(){
  var start = $('#others #event_start_at').val();
  var end = $('#others #event_end_at').val();
  if(start != end && checkbox.is(':visible')){
    checkbox.val("0");
    checkbox.css('display','none');        
  } else {
    checkbox.css('display','block');

          }
}); 
});

Problem was also with changing label for this input. When I changed, the checkbox doesn't show up again. Thank's to everyone!

Upvotes: 1

Jai
Jai

Reputation: 74738

you can try changing this:

if($('#event_halfday').attr('type') == 'hidden') {

to this:

if($('#event_halfday:visible').length == 0) {

or

if($('#event_halfday').is(':hidden')) {

so to me your final code should be like this:

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();

          if(start != end && checkbox.is(':visible')) {
              checkbox.val("0");
              checkbox.hide();
              $("label[for='event_halfday']").text("You can't .....")
          } else {
              $("label[for='event_halfday']").text("Is this a ...")
              checkbox.show();
          }
      });
  });

update:

change your if condition like this using && instead of another if in if:

if(start != end && checkbox.is(':visible')) {

Upvotes: 2

Casey Dwayne
Casey Dwayne

Reputation: 2169

From what you're asking.. I think this is what you're wanting:

if(checkbox.is(':visible')){ //do things }
else { checkbox.show(); }

Example of basic checking procedure : http://jsfiddle.net/9yfkd/1/

Upvotes: 0

duffmatthew
duffmatthew

Reputation: 63

try $checkbox.show(); $checkbox.hide(); $checkbox.value(0

Upvotes: 0

P.Sethuraman
P.Sethuraman

Reputation: 715

Check FIDDLE

** HTML **

      <div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
     <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />
    <label class="boolean optional checkbox" for="event_halfday">
       Is this a halfday event?</label>
</div>
</div>

** Jquery **

    var checkbox = $('#event_halfday');
var start = "01-04-2014";
          var end =  "05-04-2014";
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

A hidden input field is supposed to remain hidden.I think what you want to do is use a normal input field of the type text and hide it using css. Then you are able to show it using jQuery.

And then rest of the code show()/hide() for checkbox will work accordingly.

Upvotes: 0

Sharikul Islam
Sharikul Islam

Reputation: 319

That's because .show() displays items using CSS, so if you've hidden an element using CSS (via display: none), .show() will apply display: block. However, your element is explicitly hidden via the type attribute, thus CSS is irrelevant in this context. To display the item, you might need to do this:

checkbox.attr('type', 'radio');

Upvotes: 1

Related Questions