CODEWITHSUNDEEP
jqueryhtmlruby-on-railsruby-on-rails-3
DDDD
DDDD

Reputation: 3940

JQuery returning element as null

Ruby on Rails 3. I have a div id I am trying to hide or show based on the value of a checkbox selected. My script now is unable to get the element by id. It returns null. I tried the input id and name. Both return null.

Here is the script:

$(document).ready(function() {
$('#device').change(function(event){ 
var hardware = document.getElementById('#survey_hardware_');
if (($(hardware).find("input[value='IP Phones']:checked").length) || ($(hardware).find("input[value='IP PBX Systems']:checked").length))
{
    $('#phonepbx').css('display', 'inline');
}
else
{
    $('#phonepbx').css('display', 'none');
}
});
});

This is the rendered HTML question:

<div class="row" id="device">
<ul>1.  What IP hardware does your company frequently sell and/or install?  (select all that apply)<br/>
<li style="display:block;"><input id="survey_hardware_" name="survey[hardware][]" type="checkbox" value="IP Phones" /> IP Phones</li>
<li style="display:block;"><input id="survey_hardware_" name="survey[hardware][]" type="checkbox" value="IP PBX Systems" /> IP PBX Systems </li>
<li style="display:block;"><input id="survey_hardware_" name="survey[hardware][]" type="checkbox" value="IP Security/Surveillance Systems" /> IP Security/Surveillance Systems</li>
<li style="display:block;"><input id="survey_hardware_" name="survey[hardware][]" type="checkbox" value="IP infrastructure (cabling, switches...etc.)" /> IP infrastructure (cabling, switches...etc.)</li>
</ul>
</div>

Summary: The 

document.getElementById('#survey_hardware_');

returns null. I tried #survey[hardware][] and #survey[hardware][0] and all are null. How do I get the element? Thank you (Please don't hate my li styling :)

Solution

function checkHardware() {
if ($('#device input:checkbox:eq(0)').is(':checked') || $('#device input:checkbox:eq(1)').is(':checked'))
{
    $('#phonepbx').css('display', 'block');
}

etc...

Upvotes: 0

Views: 217

Answers (3)

tommyd456
tommyd456

Reputation: 10683

Something like: (note the new and unique id's)

<li style="display:block;"><input id="phones" name="survey[hardware][]" type="checkbox" value="IP Phones" /> IP Phones</li>
<li style="display:block;"><input id="pbx" name="survey[hardware][]" type="checkbox" value="IP PBX Systems" /> IP PBX Systems </li>
<li style="display:block;"><input id="security" name="survey[hardware][]" type="checkbox" value="IP Security/Surveillance Systems" /> IP Security/Surveillance Systems</li>
<li style="display:block;"><input id="infra" name="survey[hardware][]" type="checkbox" value="IP infrastructure (cabling, switches...etc.)" /> IP infrastructure (cabling, switches...etc.)</li>

and then use jQuery directly: $('#new_id_here') as has already been suggested.

Upvotes: 0

AbM
AbM

Reputation: 7779

Try without the '#':

document.getElementById('survey_hardware_');

Or use jQuery directly:

$('#survey_hardware_')

Upvotes: 2

SteveP
SteveP

Reputation: 19093

Why are you using getElementById at all ? You've got jquery, so use:

$("#survey_hardware_").find(

Upvotes: 1

Related Questions