Value from array undefined?

Discussion in 'JavaScript' started by mokimofiki, Feb 18, 2011.

  1. #1
    I have the code below which works fine in Chrome, Safari, FF but surprise surprise IE shows the alert with an undefined value.

    
    var total=""
    for(var i=0; i < document.performerselections.program.length; i++)
    {
    if(document.performerselections.program[i].checked)
    total +=document.performerselections.program[i].value
    }
    
    var s1 = total[0] + total[1] + total[2];
    var s2 = total[3] + total[4] + total[5];
    var s3 = total[6] + total[7] + total[8];
    
    alert(s1);
    
    Code (markup):
    NOTE: The form that this reads from allows 3 selections and each selection has a value of a 3 digit number. The results in all browsers besides IE7,8 is 3 variables each with a unique 3 digit number.

    Thank you in advance for any help!
     
    mokimofiki, Feb 18, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Maybe the lack of semicolons is a problem. Try this:
    
    var total="";
    for(var i=0; i < document.performerselections.program.length; i++)
    {
    if(document.performerselections.program[i].checked)
    total +=document.performerselections.program[i].value;
    }
    
    var s1 = total[0] + total[1] + total[2];
    var s2 = total[3] + total[4] + total[5];
    var s3 = total[6] + total[7] + total[8];
    
    alert(s1);
    
    Code (markup):
     
    Cash Nebula, Feb 19, 2011 IP
  3. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Thank you for your response and while semicolons were missed this doesn't fix the issue. IE still is the only browser that alerts a NaN. Any other thoughts?
     
    mokimofiki, Feb 21, 2011 IP
  4. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #4
    can you provide the relevant html?
     
    camjohnson95, Feb 21, 2011 IP
  5. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #5
    you must have duplicated input names / ids in your document that interfere so the .checked property comes back false all the time.
     
    dimitar christoff, Feb 21, 2011 IP
  6. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #6
    Runs on submit:
    
    var total="";
    for(var i=0; i < document.performerselections.program.length; i++)
    {
    if(document.performerselections.program[i].checked)
    total +=document.performerselections.program[i].value;
    }
    
    var s1 = total[0] + total[1] + total[2];
    var s2 = total[3] + total[4] + total[5];
    var s3 = total[6] + total[7] + total[8];
    
    alert(s1);
    Code (markup):
    Form only allows 3 checkboxes selected but actually has around 100 (shortened for easy looking):
    
    <form method='post' name='performerselections' onsubmit='return addToCartPreSubmit();' action='/app/site/backend/additemtocart.html'>
    <table width="100%" cellspacing="0" cellpadding="3" border="0">
    <tr><td>Add</td><td>Program Name</td><td>unknown</td><td>Details</td><td>player</td></tr>
    <tr><td'><input type="checkbox" name="program" value="219"></td><td>Bright Jazz</td><td></td><td><a class="various" href="../../item-detail.html?d=219">Details</a></td><td></td></tr>
    <tr><td'><input type="checkbox" name="program" value="220"></td><td>Electronica</td><td></td><td><a class="various" href="../../item-detail.html?d=220">Details</a></td><td></td></tr>
    <tr><td'><input type="checkbox" name="program" value="221"></td><td>Adult Casual</td><td></td><td><a class="various" href="../../item-detail.html?d=221">Details</a></td><td></td></tr>
    </table>
    </form>
    
    Code (markup):
    The only issue here is still that the variable total will display 9 digits and is broken out correctly in all but IE. IE shows NaN as the result of anything pulled from total. If alerting total as a whole it is fine.
     
    mokimofiki, Feb 21, 2011 IP
  7. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Ok, the problem is that you can't access chars like that in IE. You have to use either charAt() or substr().
    http://stackoverflow.com/questions/3668693/javascript-strings-getting-the-char-at-a-certain-point

    
    var s1 = total.substr(0,3);
    var s2 = total.substr(3,3);
    var s3 = total.substr(6,3);
    
    var s1 = total.charAt(0) + total.charAt(1) + total.charAt(2);
    var s2 = total.charAt(3) + total.charAt(4) + total.charAt(5);
    var s3 = total.charAt(6) + total.charAt(7) + total.charAt(8);
    
    Code (markup):
    This demo works in IE8/7 and proves that the results are strings. I added toString() on the end of the value just in case, but the demo still works without it.
    
    <html>
    <head>
    <script type='text/javascript'>
    function addToCartPreSubmit() {
    var total="";
    for(var i=0; i < document.performerselections.program.length; i++)
    {
    if(document.performerselections.program[i].checked)
    total += document.performerselections.program[i].value.toString();
    }
    var s1 = total.substr(0,3);
    var s2 = total.substr(3,3);
    var s3 = total.substr(6,3);
    alert(total+" "+s1+" "+s2+" "+s3);
    alert(typeof(total)+" "+typeof(s1)+" "+typeof(s2)+" "+typeof(s3)); 
    }
    </script>
    </head>
    <body>
    <form method='post' name='performerselections' onsubmit='return addToCartPreSubmit();' action='#'>
    <table width="100%" cellspacing="0" cellpadding="3" border="0">
    <tr><td>Add</td><td>Program Name</td><td>unknown</td><td>Details</td><td>player</td></tr>
    <tr><td'><input type="checkbox" name="program" value="219"></td><td>Bright Jazz</td><td></td><td><a class="various" href="#">Details</a></td><td></td></tr>
    <tr><td'><input type="checkbox" name="program" value="220"></td><td>Electronica</td><td></td><td><a class="various" href="#">Details</a></td><td></td></tr>
    <tr><td'><input type="checkbox" name="program" value="221"></td><td>Adult Casual</td><td></td><td><a class="various" href="#">Details</a></td><td></td></tr>
    <input type="submit" value="submit">
    </table>
    </form>
    </body>
    </html>
    
    Code (markup):
     
    Last edited: Feb 21, 2011
    Cash Nebula, Feb 21, 2011 IP
    mokimofiki likes this.
  8. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #8
    Is this what you are trying to do?:
    
    <form method='post' id="pfs" name='performerselections' onsubmit='return addToCartPreSubmit();' action='/app/site/backend/additemtocart.html'>
    <input type="checkbox" name="program" value="219" />
    <input type="checkbox" name="program" value="220" />
    <input type="checkbox" name="program" value="221" />
    <input type="submit" value="submit" />
    </form>
    <script type="text/javascript">
    var selectors = document.getElementById("pfs");
    selectors.onsubmit = function() {
        var total = new Array();
        for(var i=0; i<selectors.program.length; i++)
        {
            if(selectors.program[i].checked)
                total.push(document.performerselections.program[i].value);
        }
        
        for(var i=0; i<total.length; i++) {
            alert(total[i]);
        }
        
        return false;
    }
    </script>
    
    Code (markup):
     
    camjohnson95, Feb 21, 2011 IP
  9. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #9
    Thank you for your responses ... I will be adding changes this afternoon and will update this thread with a final working markup. Thanks again
     
    mokimofiki, Feb 22, 2011 IP
  10. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #10
    Cash Nebula was spot on above. You ever find yourself in or around Charlotte NC I'll take you out for a Beer. Thank you to everyone that responded.
     
    mokimofiki, Feb 22, 2011 IP
  11. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Cheers mokimofiki! We'll get tanked and pick fights with IE users. :D
     
    Cash Nebula, Feb 22, 2011 IP
  12. amahindroo

    amahindroo Peon

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    cash nebula... i think IE is the one of the only browsers which behaves a little differently as compared to Mozilla, Safari, Nettscape and so on...
     
    amahindroo, Feb 23, 2011 IP
  13. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #13
    Yeah IE being the widest used browser has more bugs than any program I have ever seen. I generally develop in firefox and then break it to make it work in IE.
     
    mokimofiki, Feb 23, 2011 IP