Welcome to WebmasterWorld Guest from 54.198.90.50

Forum Moderators: open

Message Too Old, No Replies

Javascript works in Firefox but not in IE8

     
8:22 pm on Mar 12, 2010 (gmt 0)

New User

5+ Year Member

joined:Mar 12, 2010
posts:1
votes: 0


I am sort of a beginner/intermediate to javascript, my javascript works fine in Firefox but IE8, I have spoken to a couple coders and still cant fix my problem.

If I switch from "select" to "radio", javascript works fine in both IE and Firefox, the code is like:
---------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
-->
</style>
<script language="JavaScript" type="text/javascript">
var N, get(N);
function get(N)
{
if (N == 2)
{
document.form1.airport.value = "O'Hare";
document.form1.state.value = "IL";
}

if (N == 1)
{
document.form1.airport.value = "JFK";
document.form1.state.value = "NY";
}

if (N == 3)
{
document.form1.airport.value = "Logan";
document.form1.state.value = "MA";
}

if (N == 4)
{
document.form1.airport.value = "McCarran";
document.form1.state.value = "NV";
}
}
</script>


</head>

<body>
<form name="form1" id="form1">

<p>
<select name="drop1" id="Select1" size="2" multiple="multiple">
<option name="" value="val1" selected="selected" onclick="get(1)">NYC</option>
<option name="" value="val2" onclick="get(2)">Chicago</option>
<option name="" value="val3" onclick="get(3)">Boston</option>
<option name="CIT" value="val4" onclick="get(4)">Las Vegas</option>
</select>
</p>
<table width="323" border="0" class="style4">
<tr>
<td height="35" align="center">Airport</td>
<td align="center">State</td>
</tr>
<tr>
<td width="107" height="35" align="center"><input name="airport" type="text" value="" size="12" maxlength="12" /></td>
<td width="206" align="center"><input name="state" type="text" value="" size="20" maxlength="15" /></td>
</tr>
</table>
<p>&nbsp; </p>
</form>


</body>
</html>
----------------------------------------------------
So I really appreciate any kind of help i can get.
ThX!
8:56 pm on Mar 12, 2010 (gmt 0)

Administrator

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
posts:12541
votes: 1


Welcome to WebmasterWorld, alex123456.

You may consider using "onchange" on the <select> element as opposed to an onclick handler for each option.
9:14 pm on Mar 16, 2010 (gmt 0)

New User

5+ Year Member

joined:Mar 12, 2010
posts:1
votes: 0


THX a lot!

I tried it, and it works.
11:43 am on Apr 4, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 30, 2007
posts:36
votes: 0


use DOM, pls?
6:52 pm on Apr 4, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Welcome aboard alex123456, there's a few more efficient ways to do what you're trying to do. I'm curious as to why a) you define N as a global, b) why you call get(N) at the load of the document, and c) why you use select multiple, as there's only one field for each airport and state you're trying to populate, a multiple would only populate it with the last value.

get() on load doesn't do anything, and wouldn't, because at that point, the form objects haven't loaded yet, they are farther down in the source code.

Try something like this. Note how it removes all inline javascript from your html, and in addition allows for a form validation handler, which is empty at the moment but you'll likely need. :-)

Dropping to 4.01 strict, no need for XHTML here . . . personal preference.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
.center-align { text-align:center; }
</style>
<script type="text/javascript">
window.onload = function() { attachBehaviors(); };
function attachBehaviors() {
if (document.getElementById('form1')) {
document.getElementById('form1').onsubmit=function() { return validateForm(this); };
}
if (document.getElementById('Select1')) {
document.getElementById('Select1').onchange=function() { get(this,this.form); };
}
}
//
function get(selectObj,form) {
var ind = selectObj.selectedIndex;
if (ind==0) {
form.airport.value='';
form.state.value='';
return;
}
var N = selectObj.options[ind].value;
var airports = {
1:"JFK",
2:"O'Hare",
3:"Logan",
4:"McCarran"
};
var states = {
1:"NY",
2:"IL",
3:"MA",
4:"NV"
};
if (N && (N>0)) {
form.airport.value=airports[N];
form.state.value=states[N];
}
}
//
function validateForm(form) {
// return false on errors, true if no errors.
// returning false in this placeholder so it
// doesn't submit.
alert('You submitted form.');
return false;
}
</script>
</head>
<body>
<form action="" name="form1" id="form1">
<p>
<select name="drop1" id="Select1">
<option value="0">Select</option>
<option value="1">NYC</option>
<option value="2">Chicago</option>
<option value="3">Boston</option>
<option value="4">Las Vegas</option>
</select>
</p>
<table width="323" border="0" class="style4">
<tr>
<td height="35" class="center-align">Airport</td>
<td class="center-align">State</td>
</tr>
<tr>
<td width="107" height="35" class="center-align">
<input name="airport" id="airport" type="text" value="" size="12" maxlength="12">
</td>
<td width="206" class="center-align">
<input name="state" id="state" type="text" value="" size="20" maxlength="15">
</td>
</tr>
<tr><td colspan="2" class="center-align">
<input type="submit" value="Test Validate Function">
</td></tr>
</table>
<p>&nbsp; </p>
</form>
</body>
</html>