0

I have a Ruby on Rails 3 form with check_box_tags. How do you set an ID and then get the value in a javascript function? Here is the check_box_tag

<div class="row" id="device">
  <ul>
    <li><%= check_box_tag 'survey[hardware][]', "IP Phones" %> IP Phones</li>
  </ul>
</div>

My javascript

$(document).ready(function() {
$('#device').change(function(){
    if (($('#device').val() == "IP Phone") || ($('#device').val() == "IP PBX Systems"))
    {
        $('#phonepbx').css('display', 'none');
    }
    else
    {
        $('#phonepbx').css('display', 'inline');
    }
});
});

I do not know how to set and get the id of the check_box_tag. I am trying to show or hide the div id="phonepbx" based on whether what they choose. If they select one of the first two check boxes I want to show the #phonepbx div. Otherwise keep it hidden.

Thank you

EDIT This is what the HTML ends up as:

<li><input id="survey_hardware_" name="survey[hardware][]" type="checkbox" value="IP Phones" /> IP Phones</li>

I do have require jquery and require jquery_ujs. Do I need something else?

Solution

function checkHardware() {
if ($('#device input:checkbox:eq(0)').is(':checked') || $('#device input:checkbox:eq(1)').is(':checked'))
{
    $('#phonepbx').css('display', 'block');
}
3
  • hmmm.. jQuery val function usually expects an input element not a div. Although if you cal the val $('#device').val('some value here') with some value you will store that one on the element. From what I see in your code, that's not the case. Dec 11, 2013 at 2:48
  • When I enter the checkbox id I get null in JS. document.getElementById('#survey[hardware][]'); null
    – DDDD
    Dec 12, 2013 at 15:14
  • 1
    getElementById is not jQuery, you don't prepend the id with a # sign, also, the id on your input tag is survey_hardware_ so it would be something like document.getElementById('survey_hardware_') to get that particular checkbox. Dec 13, 2013 at 18:05

2 Answers 2

1

Per your instructions, you are just checking to see if at least one of two specific checkboxes is checked:

$(document).ready(function() {
  $('#device').change(function(event){
    if ($(event.target).filter("input[value='IP Phone']:checked").length ||
      $(event.target).filter("input[value='IP PBX Systems']:checked").length)
    {
        $('#phonepbx').css('display', 'inline');
    }
    else
    {
        $('#phonepbx').css('display', 'none');
    }
  });
});
6
  • 1
    BTW, the checkbox tag is automatically created by check_box_tag, it is the first string you provide after you call that method, and is the same as the name. See the docs here. So the id for that checkbox is 'survey[hardware][]'
    – RustyToms
    Dec 11, 2013 at 3:41
  • The result is the same no matter which check box is selected. It is not reading the value. Also, when I uncheck the box the div is still displayed. I have 4 check boxes with different values.
    – DDDD
    Dec 11, 2013 at 3:55
  • @DDDD Okay, I didn't realize how you wanted it to work. I edited the answer. That makes it simpler, but the answer is perhaps not as informative :( And note that I had to switch around your if else statement.
    – RustyToms
    Dec 11, 2013 at 4:19
  • I changed event.target to $("survey_hardware_"). This works for getting the element. But the if statement returns 0. Which is supposed to have a length value.
    – DDDD
    Dec 12, 2013 at 15:58
  • 1
    @DDDD, I made a stupid mistake. If you use event.target it will give you the input that has been checked. If you use .find() to select only a certain input you will always get nothing, because .find() doesn't look at the selected element, it looks inside it. I changed .find() to .filter(), and now this code should work properly just as it is, try it out.
    – RustyToms
    Dec 12, 2013 at 20:43
0

It looks to me like you're trying to trap the checkbox events by adding a change handler to the div. That's not the ideal place to trap it, as you then have to search for what changed. But as RustyToms said, your ID should be 'survey[hardware][]' as set by RoR.

$(document).ready(function() {
  $('#survey[hardware][]').on('click', function(){
    (this.checked && this.val().match(/IP Phone|IP PBX Systems/)) ? $('#phonepbx').hide() : $('#phonepbx').show();
  });
});
5
  • I heard onclick might be better. Do you have an example for click?
    – DDDD
    Dec 11, 2013 at 19:04
  • Edited for click event
    – Craig
    Dec 11, 2013 at 19:08
  • Well thank you for the example. Unfortunately the script does nothing when I click a check_box_tag with that ID. It isn't hidden either.
    – DDDD
    Dec 11, 2013 at 19:39
  • I do have require jquery and require jquery_ujs in application.js Do I need something else?
    – DDDD
    Dec 11, 2013 at 19:49
  • 1
    @user1943112, change the id to "survey_hardware_", that is what survey[hardware][] will be translated into.
    – RustyToms
    Dec 12, 2013 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.