Not sure why, but some functions aren’t working like they should. I just got into using JavaScript so my debugging skills are lacking. I just added a few lines to this from it’s previous version (to implement new features) and since then, it hasn’t worked like it used to. :/ I used jsBin or whatever it’s called and it told me a few things but I don’t know if it is legitimate advice or not.
One of the things it told me was that I use setID out of scope, I guess because I use it out of the for statement? But it’s still in the same function. If that’s a problem, how do I declare it so I can use it? (Although that part works fine.)
Another was that I should compare metroID and 0 using === instead of ==. Not really sure what the difference is, to be completely honest.
Anyway, the problem I’m having is that the function setSubDesc() isn’t being called on the page load anymore. It was before I added that code. Another problem I’m having is that changing the radio buttons “pay_type” isn’t calling the change in the Javascript. If I move some things around, certain parts work like they should. But I really don’t understand why the placement of things makes a difference.
Any/All help is greatly appreciated. :/
What I added:
setFundSelect();
function setFundSelect() {
var orgID = $("#org_fund_id").val();
$("#f_span").hide();
$("#f_div").hide();
$('#fundraiser_id').removeClass('required');
for (var i=0; i < orgs.length; i++) {
if (orgs[i][1] == orgID) {
var setID = i;
}
}
if (orgs[setID][4] == '1') {
$('#fundraiser_id').addClass('required');
$("#f_span").show();
$("#f_div").show();
$("#fundraiser_id").children().remove();
for (var i=0; i < fundraisers.length; i++) {
if (fundraisers[i][0] == orgID) {
if (fundraisers[i][4]) {
selectedHTML = 'selected=selected';
} else {
selectedHTML = '';
}
$('#fundraiser_id').append('<option value="'+fundraisers[i][2]+'" '+selectedHTML+'>'+fundraisers[i][3]+'</ option>');
}
}
}
}
The full scope of Javascript in the page:
<script type="text/javascript">
var orgs = [];
var fundraisers = [];
function pageInit() {
<?php do {
if ($row_rsOrg['ID'] == $_GET['fund_ID']) {
$selected = "true";
$selectedMetroID = $row_rsOrg['metro_ID'];
} else {
$selected = "false";
} ?>
orgs.push(['<?php echo $row_rsOrg['metro_ID'] ?>','<?php echo $row_rsOrg['ID'] ?>', '<?php echo addslashes($row_rsOrg['org_name']) ?>', <? echo $selected; ?>, '<?php echo $row_rsOrg['if_fund'] ?>']);
<?php } while ($row_rsOrg = mysql_fetch_assoc($rsOrg)); ?>
<?php do {
if ($row_rsFund['ID'] == $_GET['ref_ID']) {
$selected2 = "true";
$selectedOrgID = $row_rsFund['org_fund_ID'];
} else {
$selected2 = "false";
} ?>
fundraisers.push(['<?php echo $row_rsFund['org_fund_ID'] ?>', '<?php echo $row_rsFund['ref_ID'] ?>', '<?php echo $row_rsFund['ID'] ?>', '<?php echo addslashes($row_rsFund['firstname']) ?> <?php echo addslashes($row_rsFund['lastname']) ?>', <? echo $selected2; ?>]);
<?php } while ($row_rsFund = mysql_fetch_assoc($rsFund)); ?>
$('#metro_id').change(function() {
setOrgSelect();
});
$('#org_fund_id').change(function() {
setFundSelect();
});
$('#subscription_value').change(function() {
setSubDesc();
});
$('#metro_id').append('<option value="0">Please Choose...</ option>');
$('#metro_id').append('<option value="1" <? if ($selectedMetroID == 1) { echo "selected=selected"; }?>>St. Louis</ option>');
$('#metro_id').append('<option value="2" <? if ($selectedMetroID == 2) { echo "selected=selected"; }?>>Charlotte</ option>');
setOrgSelect();
setFundSelect();
setSubDesc();
$("input[name='pay_type']").change(function(){
$('#ppac').removeClass('required');
$('#cc').removeClass('required');
$('#cc_cvv2').removeClass('required');
$('#name').removeClass('required');
$('#street').removeClass('required');
$('#zip').removeClass('required');
if ($("input[name='pay_type']:checked").val() == 'cc') {
$('#pay_type_cc_div').show();
$('#pay_type_code_div').hide();
$('#cc').addClass('required');
$('#cc_cvv2').addClass('required');
$('#name').addClass('required');
$('#street').addClass('required');
$('#zip').addClass('required');
} else {
$('#pay_type_code_div').show();
$('#pay_type_cc_div').hide();
$('#ppac').addClass('required');
}
$('.submit_divs').show();
});
}
function setOrgSelect() {
var metroID = $("#metro_id").val();
$("#o_span").show();
$("#org_fund_id").children().remove();
for (var i=0; i < orgs.length; i++) {
if (orgs[i][0] == metroID) {
if (orgs[i][3]) {
selectedHTML = 'selected=selected';
} else {
selectedHTML = '';
}
$('#org_fund_id').append('<option value="'+orgs[i][1]+'" '+selectedHTML+'>'+orgs[i][2]+'</ option>');
}
}
}
function setFundSelect() {
var orgID = $("#org_fund_id").val();
$("#f_span").hide();
$("#f_div").hide();
$('#fundraiser_id').removeClass('required');
for (var i=0; i < orgs.length; i++) {
if (orgs[i][1] == orgID) {
var setID = i;
}
}
if (orgs[setID][4] == '1') {
$('#fundraiser_id').addClass('required');
$("#f_span").show();
$("#f_div").show();
$("#fundraiser_id").children().remove();
for (var i=0; i < fundraisers.length; i++) {
if (fundraisers[i][0] == orgID) {
if (fundraisers[i][4]) {
selectedHTML = 'selected=selected';
} else {
selectedHTML = '';
}
$('#fundraiser_id').append('<option value="'+fundraisers[i][2]+'" '+selectedHTML+'>'+fundraisers[i][3]+'</ option>');
}
}
}
}
function setSubDesc() {
var subVal = $("#subscription_value").val();
if (subVal == "10") {
$("#monthly_sub").show();
$("#yearly_sub").hide();
} else {
$("#monthly_sub").hide();
$("#yearly_sub").show();
}
}
</script>
Regarding to the === or == question I strongly recommend reading this post Which equals operator (== vs ===) should be used in JavaScript comparisons?