Javascript Logic Issue in IE

Question

First I'll explain a little bit about my system here. It's a form to allow children to book onto a series of day courses that run in the school easter and summer breaks. The form allows registration of two children simultaneously, and if the dates for both children are the same, the sibling has a £5 discount for their dates.

On the form, there is a date section which is a series of checkboxes. As you check the checkboxes a total price is calculated at the bottom of the page.

The single child price is £29 and the sibling rate (for those dates that match up to the first child) is £24. There is an additional £16.50 charge for booking onto the horseriding course - but this logic error only extends to the date selection.

For some reason, which I cannot fathom, in Internet Explorer the price for registering 2 children appears £5 less that it should. Here is my code for calculating the dates (the function below is fired onclick of the date checkbox):

function processDates(){
    //contentsA and contentsB are used for outputting on the email confirmation
    valsA = [], dates_A =  document.forms['registerForm']['childADates[]'];
    for(var iA=0,elmA;elmA = dates_A[iA];iA++) {
        if(elmA.checked) {
            valsA.push(elmA.value);
        }
    }
    contentsA = valsA.join(', ');
    //this generates a string based on what dates were selected i.e. April 18th, April 19th etc.


    var valsB = [], dates_B =  document.forms['registerForm']['childBDates[]'];
    for(var iB=0,elmB;elmB = dates_B[iB];iB++) {
        if(elmB.checked) {
            valsB.push(elmB.value);
        }
    }
    contentsB = valsB.join(', ');
    //same as contentA but for the second child.

    //get the total dates for both children
    //fullDates is the number of dates selected (number of checkboxes checked)
    fullDates = (valsA.length + valsB.length);
    siblingDates=0;
    //this detects if entries are matching in the two arrays valsA and valsB
    for(var i in valsA) {
        for(var j in valsB) {
            if(valsA[i]==valsB[j]){
                            //if there are matching dates, increment a siblingDates value to get a total number of matching dates in the siblingDates variable
                siblingDates=siblingDates+1;
            }
        }
    }
    //get the amount of dates to be charged at £29
    fullDates = fullDates - siblingDates;

    fullPrice = fullDates*29;
    siblingPrice = siblingDates*24;
    totalPrice = fullPrice + siblingPrice;
    calcTotal();
}

function calcTotal(){
    var horseA = parseInt(document.getElementById("horseridingA").value);
    var horseB = parseInt(document.getElementById("horseridingB").value);
    var horse =  parseInt(horseA+horseB);
    //Add the horseriding price
    overall = parseFloat(horse*16.5)+totalPrice;
    //output the overall total to the form
    document.getElementById("totalPrice").innerHTML = overall;
}

UPDATE: This process is run when the user selects one of the checkboxes that correspond to each date. April 18th [], April 19th [] etc. These checkboxes are duplicated for the 2nd child. Upon clicking one of the checkboxes the above functions are run that calculate a total price at the bottom of the screen. In internet explorer, clicking a date for ChildA yields £24 not £29, but only on the FIRST date clicked, all other dates both childA and childB are calculated correctly. The first date choice is £5 less than it should be.

I just used IE to select the first date on the main child side and it gave £24, then unselected the same checkbox which gave £-5

UPDATE 2: Okay! I've narrowed down the problem to the below statement:

fullDates = (valsA.length + valsB.length);
siblingDates=0;
for(var i in valsA) {
alert(valsA[i]);
    for(var j in valsB) {
        if(valsA[i]==valsB[j]){
            alert("does equal");
            siblingDates=siblingDates+1;
        }else{
            alert("does not equal");
        }
    }
}

Upon clicking the April 18th checkbox, the first alert (valsA[i]) reads April 18th

The second alert reads "does not equal" as expected.

In Internet Explorer the above happens normally as expected but I get an additional set of alerts:

After the above 2 alerts I get a bizarre function alert that alerts of a string length error, it's about four lines of minified code so very difficult to decipher.

Then the same alert appears again.

Then I get "does equal"

Answer 1

Try changing your loop to this:

for (var i=0; i < valsA.length; i++) {
    for (var j=0; j < valsB.length; j++) {
        if(valsA[i]==valsB[j]){
             alert("does equal");
             siblingDates=siblingDates+1;
        }else{
            alert("does not equal");
        }
    }
}

Answer 2

first up, these lines look wrong, is this how they appear in your code?

for(var iA=0,elmA;elmA = dates_A[iA];iA++)

  for(var iB=0,elmB;elmB = dates_B[iB];iB++) 

try something like this

for(var iA=0;iA < dates_A.length;iA++){
var elmA = dates_A[iA];
...
}