I have some script that creates a calculator using checkboxes and drop-downs.
I am rebuilding a site on a new domain, so this code is on two sites.
The code stopped working in the head so I moved it to the footer and it worked again. I removed the code so I could check something that I couldn't see with the script running. When I put the script back, it stopped working again. Now it won't work no matter where I put it.
Developer tools in Chrome gives an error for j(). saying it's not valid, but it doesn't come up with this error on the old site, where the script is identical. Here is the code:
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/innerstyle.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/validation.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory'); ?>/js/jquery.selectbox-0.2.js"></script>
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_directory'); ?>/jquery.selectbox.css" type="text/css" media="screen" />
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function(){
j("#calc-num-people").selectbox();
j("#calc-time").selectbox();
j('#checked1').click(function(e) {
if (j('input#chk-drinking').is(':checked'))
{
j('#checked1').removeClass("checkbox added");
j('#checked1').addClass("checkbox add1");
j('input#chk-drinking').removeAttr('checked');
}
else
{
j('#checked1').removeClass("checkbox add1");
j('#checked1').addClass("checkbox added");
j('input#chk-drinking').attr('checked',true);
}
calc_gallons();
});
j('#checked2').click(function(e) {
if (j('input#chk-washing').is(':checked'))
{
j('input#chk-washing').removeAttr('checked');
j('#checked2').removeClass("checkbox added");
j('#checked2').addClass("checkbox add1");
}
else
{
j('input#chk-washing').attr('checked',true);
j('#checked2').removeClass("checkbox add1");
j('#checked2').addClass("checkbox added");
}
calc_gallons();
});
j('#checked3').click(function(e) {
if (j('input#chk-cooking').is(':checked'))
{
j('input#chk-cooking').removeAttr('checked');
j('#checked3').removeClass("checkbox added");
j('#checked3').addClass("checkbox add1");
}
else
{
j('input#chk-cooking').attr('checked',true);
j('#checked3').removeClass("checkbox add1");
j('#checked3').addClass("checkbox added");
}
calc_gallons();
});
});
function calc_gallons() {
var drinking = (j('input#chk-drinking').attr('checked')) ? 1 : 0;
var washing = (j('input#chk-washing').attr('checked')) ? 1 : 0;
var cooking = (j('input#chk-cooking').attr('checked')) ? 1 : 0;
var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val());
j('.calc-answer-text').html(answer);
}
</script>
UPDATE: I changed the code as shown in davcs86's answer. The checkboxes are working, but the answer isn't getting updated when the dropdown is clicked. I'm assuming because the selectbox jquery isn't working correctly. selected="selected" stays in the HTML after you click on any option. So it looks like the it's confused about which number to use in the calculation. How can I get this to work?
<div class="check_main">
<span>
<div class="checkbox added" id="checked1"> <input id="chk-drinking" value="1" type="checkbox" checked="checked"> </div> <label>Drinking</label>
</span>
<span> <div class="checkbox added" id="checked2"> <input id="chk-washing" value="1" type="checkbox" checked="checked"> </div> <label>Washing</label> </span>
<span> <div class="checkbox added" id="checked3"> <input id="chk-cooking" value="1" type="checkbox" checked="checked"> </div> <label>Cooking</label> </span>
</div>
<div class="calc_icons"><img src="/wp-content/uploads/calculator-icons.png"></div>
<div class="calc_step2">
<div class="people center"> <label>People</label>
<select tabindex="1" onclose="calc_gallons();" id="calc-num-people" name="calc-num-people">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="cross"> </div>
<div class="people center months"> <label>Months</label>
<select tabindex="2" onclose="calc_gallons();" id="calc-time">
<option value="30">1</option>
<option value="60">2</option>
<option selected="selected" value="90">3</option>
<option value="120">4</option>
<option value="150">5</option>
<option value="180">6</option>
</select> </div>
<div class="cross"> </div>
<div class="people center gallons"> <label>Gallons</label>
<div class="calc-answer-text">90</div>
</div>
</div>
Create a jQuery scope for j, with something like
jQuery.noConflict();
(function(j){
j(function(){
//...
});
})(jQuery);
Also, after jQuery 1.6+, you have to use .prop() when working with checkboxes. Thus, your code would be
jQuery.noConflict();
(function(j){
j(function(){
j("#calc-num-people").selectbox();
j("#calc-time").selectbox();
j('#checked1').click(function(e) {
if (j('input#chk-drinking').is(':checked'))
{
j('#checked1').removeClass("checkbox added");
j('#checked1').addClass("checkbox add1");
j('input#chk-drinking').prop('checked', false);
}
else
{
j('#checked1').removeClass("checkbox add1");
j('#checked1').addClass("checkbox added");
j('input#chk-drinking').prop('checked',true);
}
calc_gallons();
});
j('#checked2').click(function(e) {
if (j('input#chk-washing').is(':checked'))
{
j('input#chk-washing').prop('checked', false);
j('#checked2').removeClass("checkbox added");
j('#checked2').addClass("checkbox add1");
}
else
{
j('input#chk-washing').prop('checked',true);
j('#checked2').removeClass("checkbox add1");
j('#checked2').addClass("checkbox added");
}
calc_gallons();
});
j('#checked3').click(function(e) {
if (j('input#chk-cooking').is(':checked'))
{
j('input#chk-cooking').prop('checked', false);
j('#checked3').removeClass("checkbox added");
j('#checked3').addClass("checkbox add1");
}
else
{
j('input#chk-cooking').prop('checked',true);
j('#checked3').removeClass("checkbox add1");
j('#checked3').addClass("checkbox added");
}
calc_gallons();
});
function calc_gallons() {
var drinking = (j('input#chk-drinking').prop('checked')) ? 1 : 0;
var washing = (j('input#chk-washing').prop('checked')) ? 1 : 0;
var cooking = (j('input#chk-cooking').prop('checked')) ? 1 : 0;
var answer = (j('#calc-num-people').val() * ((drinking * 0.5) + (washing * 0.25) + (cooking * 0.25)) * j('#calc-time').val());
j('.calc-answer-text').html(answer);
}
});
})(jQuery);
UPDATE
Since OP is using select-box plugin, it's necessary to use their methods to recalculate the gallons after the selection changes.
j("#calc-num-people, #calc-time").selectbox({
onChange: function (val, inst) {
calc_gallons();
}
});
instead of,
j("#calc-num-people").selectbox();
j("#calc-time").selectbox();