Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript not working in IE

    Hello,

    I have a website that has some javascript on it, this works fine in Chrome, Opera, Safari and Firefox but not IE (any version I've tried).

    I've installed Firebug to try to help debug it but that doesn't pick up any issues.

    I'm not very good when it comes to javascript so would appreciate any assistance.

    The page with the javascript is here:

    http://www.fantasy-f1-league.com/team3.php

    You will need to login, please use these details:

    user: test
    pw: test

    The javascript is supposed to update the "Remaining Budget" as you choose options from the dropdowns, it also does a few other things such as prevents submission of invalid team selections.

    Thanks for any assistance.

    David

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The dropdowns aren't even displayed and document.forms has a length of 0.

    This looks like a markup issue. validator.w3.org

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I've corrected the markup but the problem persists, can anyone else offer any advice?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,990
    Thanks
    56
    Thanked 557 Times in 554 Posts
    from what I can tell, IE isn't accepting the login. In IE I log in, but get the message:
    "You need to be logged in to view this page" and the user stats in the right sidebar are different.

    php problem, maybe?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    I get the contradictory messages

    You need to be logged in to view this page - if you don't have an account then you can register for free.

    Logged in

    Welcome to Fantasy-F1-League

    But when I revisit the page I am still logged in as test and I seem to be able to change the F1 team details.

    Clearly a PHP problem.
    Last edited by Philip M; 01-10-2012 at 08:43 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for looking but this isn't a PHP problem, or it would be the same in all browsers etc.

    The reason you get that message is because I've given you the direct link to the team page, the fix for that issue is fairly long-winded (or I could use a meta refresh) but I'm really interested in getting the javascript working.

    If you use the homepage link

    http://www.fantasy-f1-league.com

    and then login using test/test and then click the team option from the menu this is what the usual user experience will be like.

    I really do appreciate the help, thanks again everyone.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    FWIW, the page works perfectly fine in MSIE 9.

    But in any case, your recalc() code is much more complex than it needs to be.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    Try this. Though if the other didn't work in MSIE 7 I'm not sure why this would. But it might.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function recalc()
    {
        var form = document.getElementById("budgetForm");
    
        var total = 100;
        
        var selects = [];
        var selectNames = ["driver1","driver2","driver3","aero","engine","chassis"];
      
        for ( var s = 0; s < selectNames.length; ++s )
        {
            var field = form[ selectNames[s] ];
            selects[s] = field;
            var text = field.options[field.selectedIndex].text;
            var cost = text.replace( /^\D+(\d+\.\d*)\D*$/, "$1");
            total -= cost;
        }
        var d1 = selects[0].value;
        var d2 = selects[1].value;
        var d3 = selects[2].value;
        var btn = document.getElementById("submit");
    
        btn.disabled = ( total < 0 );
    
        var msg = ""; // ditto
    
        if ( d1 == d2 || d1 == d2 || d2 == d3 ) 
        {
           msg = "Cannot select the same driver more than once";
           btn.disabled = true;
        }         
        document.getElementById("status").innerHTML = msg;
    
        var overUnder = document.getElementById("overUnder");
        overUnder.className = ( total < 0 ) ? "over" : "under";
        overUnder.innerHTML = "&pound;" + total + " M"
        
    }
    </script>
    <style type="text/css">
    span#status { font-size: x-large; color: red; }
    h2#budget { font-size: xx-large; color: red; }
    span.over { color: red; }
    span.under { color: green }
    </style>
    </head>
    <body>
    <form id="budgetForm" action="/team3.php" method="post" align="left">
    
    <span id="status"></span>
    
    <h2 id='budget'>Remaining Budget: <span id="overUnder" class="under">&pound;63.0 M</span></h2>
    <p>Driver 1   :<select name='driver1' onchange='recalc()'>
    <option value='Sebastian Vettel'>Sebastian Vettel: &pound;39.0 M</option>
    <option value='Jenson Button'>Jenson Button: &pound;27.0 M</option>
    <option value='Mark Webber'>Mark Webber: &pound;26.0 M</option>
    <option value='Fernando Alonso'>Fernando Alonso: &pound;25.0 M</option>
    <option value='Lewis Hamilton'>Lewis Hamilton: &pound;22.0 M</option>
    <option value='Felipe Massa'>Felipe Massa: &pound;12.0 M</option>
    <option value='Nico Rosberg'>Nico Rosberg: &pound;9.0 M</option>
    <option value='Michael Schumacher'>Michael Schumacher: &pound;8.0 M</option>
    <option value='Kimi Raikkonen'>Kimi Raikkonen: &pound;5.0 M</option>
    <option value='Romain Grosjean'>Romain Grosjean: &pound;4.0 M</option>
    <option value='Kamui Kobayashi'>Kamui Kobayashi: &pound;3.0 M</option>
    <option value='Paul di Resta' selected='selected'>Paul di Resta: &pound;3.0 M</option>
    <option value='Nico Hulkenberg'>Nico Hulkenberg: &pound;2.0 M</option>
    <option value='Sergio Perez'>Sergio Perez: &pound;2.0 M</option>
    <option value='Daniel Ricciardo'>Daniel Ricciardo: &pound;2.0 M</option>
    <option value='Jean-Eric Vergne'>Jean-Eric Vergne: &pound;2.0 M</option>
    <option value='Charles Pic'>Charles Pic: &pound;1.0 M</option>
    <option value='Timo Glock'>Timo Glock: &pound;1.0 M</option>
    <option value='Vitantonio Liuzzi'>Vitantonio Liuzzi: &pound;1.0 M</option>
    <option value='Pedro de la Rosa'>Pedro de la Rosa: &pound;1.0 M</option>
    <option value='Jarno Trulli'>Jarno Trulli: &pound;1.0 M</option>
    <option value='Heikki Kovalainen'>Heikki Kovalainen: &pound;1.0 M</option>
    <option value='Pastor Maldonado'>Pastor Maldonado: &pound;1.0 M</option>
    <option value='Rubens Barrichello'>Rubens Barrichello: &pound;1.0 M</option>
    <option value='No Driver Chosen'>No Driver Chosen: &pound;0.0 M</option>
    </select></p>
    <p>Driver 2  :<select name='driver2' onchange='recalc()'>
    <option value='Sebastian Vettel'>Sebastian Vettel: &pound;39.0 M</option>
    <option value='Jenson Button'>Jenson Button: &pound;27.0 M</option>
    <option value='Mark Webber' selected='selected'>Mark Webber: &pound;26.0 M</option>
    <option value='Fernando Alonso'>Fernando Alonso: &pound;25.0 M</option>
    <option value='Lewis Hamilton'>Lewis Hamilton: &pound;22.0 M</option>
    <option value='Felipe Massa'>Felipe Massa: &pound;12.0 M</option>
    <option value='Nico Rosberg'>Nico Rosberg: &pound;9.0 M</option>
    <option value='Michael Schumacher'>Michael Schumacher: &pound;8.0 M</option>
    <option value='Kimi Raikkonen'>Kimi Raikkonen: &pound;5.0 M</option>
    <option value='Romain Grosjean'>Romain Grosjean: &pound;4.0 M</option>
    <option value='Kamui Kobayashi'>Kamui Kobayashi: &pound;3.0 M</option>
    <option value='Paul di Resta'>Paul di Resta: &pound;3.0 M</option>
    <option value='Nico Hulkenberg'>Nico Hulkenberg: &pound;2.0 M</option>
    <option value='Sergio Perez'>Sergio Perez: &pound;2.0 M</option>
    <option value='Daniel Ricciardo'>Daniel Ricciardo: &pound;2.0 M</option>
    <option value='Jean-Eric Vergne'>Jean-Eric Vergne: &pound;2.0 M</option>
    <option value='Charles Pic'>Charles Pic: &pound;1.0 M</option>
    <option value='Timo Glock'>Timo Glock: &pound;1.0 M</option>
    <option value='Vitantonio Liuzzi'>Vitantonio Liuzzi: &pound;1.0 M</option>
    <option value='Pedro de la Rosa'>Pedro de la Rosa: &pound;1.0 M</option>
    <option value='Jarno Trulli'>Jarno Trulli: &pound;1.0 M</option>
    <option value='Heikki Kovalainen'>Heikki Kovalainen: &pound;1.0 M</option>
    <option value='Pastor Maldonado'>Pastor Maldonado: &pound;1.0 M</option>
    <option value='Rubens Barrichello'>Rubens Barrichello: &pound;1.0 M</option>
    <option value='No Driver Chosen'>No Driver Chosen: &pound;0.0 M</option>
    </select></p>
    <p>Driver 3  :<select name='driver3' onchange='recalc()'>
    <option value='Sebastian Vettel'>Sebastian Vettel: &pound;39.0 M</option>
    <option value='Jenson Button'>Jenson Button: &pound;27.0 M</option>
    <option value='Mark Webber'>Mark Webber: &pound;26.0 M</option>
    <option value='Fernando Alonso'>Fernando Alonso: &pound;25.0 M</option>
    <option value='Lewis Hamilton'>Lewis Hamilton: &pound;22.0 M</option>
    <option value='Felipe Massa'>Felipe Massa: &pound;12.0 M</option>
    <option value='Nico Rosberg'>Nico Rosberg: &pound;9.0 M</option>
    <option value='Michael Schumacher'>Michael Schumacher: &pound;8.0 M</option>
    <option value='Kimi Raikkonen'>Kimi Raikkonen: &pound;5.0 M</option>
    <option value='Romain Grosjean'>Romain Grosjean: &pound;4.0 M</option>
    <option value='Kamui Kobayashi'>Kamui Kobayashi: &pound;3.0 M</option>
    <option value='Paul di Resta'>Paul di Resta: &pound;3.0 M</option>
    <option value='Nico Hulkenberg'>Nico Hulkenberg: &pound;2.0 M</option>
    <option value='Sergio Perez'>Sergio Perez: &pound;2.0 M</option>
    <option value='Daniel Ricciardo'>Daniel Ricciardo: &pound;2.0 M</option>
    <option value='Jean-Eric Vergne'>Jean-Eric Vergne: &pound;2.0 M</option>
    <option value='Charles Pic'>Charles Pic: &pound;1.0 M</option>
    <option value='Timo Glock'>Timo Glock: &pound;1.0 M</option>
    <option value='Vitantonio Liuzzi'>Vitantonio Liuzzi: &pound;1.0 M</option>
    <option value='Pedro de la Rosa'>Pedro de la Rosa: &pound;1.0 M</option>
    <option value='Jarno Trulli'>Jarno Trulli: &pound;1.0 M</option>
    <option value='Heikki Kovalainen'>Heikki Kovalainen: &pound;1.0 M</option>
    <option value='Pastor Maldonado'>Pastor Maldonado: &pound;1.0 M</option>
    <option value='Rubens Barrichello' selected='selected'>Rubens Barrichello: &pound;1.0 M</option>
    <option value='No Driver Chosen'>No Driver Chosen: &pound;0.0 M</option>
    </select></p>
    <p>Engines :<select name='engine' onchange='recalc()'>
    <option value='Red Bull'>Red Bull: &pound;33.0 M</option>
    <option value='McLaren'>McLaren: &pound;25.0 M</option>
    <option value='Ferrari'>Ferrari: &pound;19.0 M</option>
    <option value='Mercedes'>Mercedes: &pound;9.0 M</option>
    <option value='Lotus' selected='selected'>Lotus: &pound;4.0 M</option>
    <option value='Force India'>Force India: &pound;3.0 M</option>
    <option value='Toro Rosso'>Toro Rosso: &pound;2.0 M</option>
    <option value='Sauber'>Sauber: &pound;2.0 M</option>
    <option value='Williams'>Williams: &pound;1.0 M</option>
    <option value='Caterham'>Caterham: &pound;1.0 M</option>
    <option value='HRT'>HRT: &pound;1.0 M</option>
    <option value='Marussia'>Marussia: &pound;1.0 M</option>
    <option value='No Engine Chosen'>No Engine Chosen: &pound;0.0 M</option>
    </select></p>
    <p>Aero Pack:<select name='aero' onchange='recalc()'>
    <option value='Red Bull'>Red Bull: &pound;33.0 M</option>
    <option value='McLaren'>McLaren: &pound;25.0 M</option>
    <option value='Ferrari'>Ferrari: &pound;19.0 M</option>
    <option value='Mercedes'>Mercedes: &pound;9.0 M</option>
    <option value='Lotus'>Lotus: &pound;4.0 M</option>
    <option value='Force India'>Force India: &pound;3.0 M</option>
    <option value='Toro Rosso'>Toro Rosso: &pound;2.0 M</option>
    <option value='Sauber'>Sauber: &pound;2.0 M</option>
    <option value='Williams' selected='selected'>Williams: &pound;1.0 M</option>
    <option value='Caterham'>Caterham: &pound;1.0 M</option>
    <option value='HRT'>HRT: &pound;1.0 M</option>
    <option value='Marussia'>Marussia: &pound;1.0 M</option>
    <option value='No Aero Chosen'>No Aero Chosen: &pound;0.0 M</option>
    </select></p>
    <p>Chassis    :<select name='chassis' onchange='recalc()'>
    <option value='Red Bull'>Red Bull: &pound;33.0 M</option>
    <option value='McLaren'>McLaren: &pound;25.0 M</option>
    <option value='Ferrari'>Ferrari: &pound;19.0 M</option>
    <option value='Mercedes'>Mercedes: &pound;9.0 M</option>
    <option value='Lotus'>Lotus: &pound;4.0 M</option>
    <option value='Force India'>Force India: &pound;3.0 M</option>
    <option value='Sauber'>Sauber: &pound;2.0 M</option>
    <option value='Toro Rosso' selected='selected'>Toro Rosso: &pound;2.0 M</option>
    <option value='Williams'>Williams: &pound;1.0 M</option>
    <option value='Caterham'>Caterham: &pound;1.0 M</option>
    <option value='HRT'>HRT: &pound;1.0 M</option>
    <option value='Marussia'>Marussia: &pound;1.0 M</option>
    <option value='No Chassis Chosen'>No Chassis Chosen: &pound;0.0 M</option>
    </select></p>
    <br><br>
    <input id='submit' class='button' type='submit' name='submit' align='right' value='Change Team'>
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by davidjwest View Post
    Thanks, I've corrected the markup but the problem persists, can anyone else offer any advice?
    When you log-in, the page doesn't always update properly, meaning that the selects don't appear. The user has to perform a reload.

    The reason that the updating doesn't work in IE, is because IE has a property called document.recalc. Rename the function.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    Ahhhh...fascinating. MSIE 9 either doesn't have that property or indeed allows it to be overridden.

    David: It's sufficient to just change the name to, for example, Recalc

    JavaScript is case sensitive so recalc and Recalc are different names.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so, so much, it is now working, I just had to rename the function.

    This has been a complete pain for so long now, I really appreciate everyone's help with this.

    A friend wrote this javascript for me and he's not contactable any more, my own knowledge of javascript is poor, as you can tell, but I am learning slowly!

    I'll sort out the PHP login issue in due course, but thanks again so very much!





    Oh, one odd thing, it never worked for me even in IE9, fine now though!
    Last edited by davidjwest; 01-11-2012 at 12:15 PM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    Well, your friend wasn't the best JavaScript coder. He made it work, but he made it a lot more complex than it needed to be, as evidence my version of the same code. I'm sure mine could be improved, too, with only a bit more thought.

    [Just found a way to shrink it by 4 more lines, for example.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •