Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: open

Javascript works in Firefox but not in IE8

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

5+ Year Member



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)

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



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)

5+ Year Member



THX a lot!

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

5+ Year Member



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

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



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>
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month