...

View Full Version : Javascript not working in IE



davidjwest
01-05-2012, 11:37 AM
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

Logic Ali
01-05-2012, 02:53 PM
The dropdowns aren't even displayed and document.forms has a length of 0.

This looks like a markup issue. validator.w3.org (http://validator.w3.org)

davidjwest
01-10-2012, 05:31 PM
Thanks, I've corrected the markup but the problem persists, can anyone else offer any advice?

xelawho
01-10-2012, 05:58 PM
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?

Philip M
01-10-2012, 07:39 PM
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.

davidjwest
01-10-2012, 08:56 PM
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.

Old Pedant
01-10-2012, 10:11 PM
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.

Old Pedant
01-10-2012, 11:16 PM
Try this. Though if the other didn't work in MSIE 7 I'm not sure why this would. But it might.


<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>

Logic Ali
01-11-2012, 12:22 AM
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.

Old Pedant
01-11-2012, 12:45 AM
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.

davidjwest
01-11-2012, 11:05 AM
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!

:thumbsup:

:D

Oh, one odd thing, it never worked for me even in IE9, fine now though!

Old Pedant
01-11-2012, 07:55 PM
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.]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum