homepage Welcome to WebmasterWorld Guest from 54.166.113.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Javascript works in Firefox but not in IE8
alex123456



 
Msg#: 4096600 posted 8:22 pm on Mar 12, 2010 (gmt 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!

 

coopster

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



 
Msg#: 4096600 posted 8:56 pm on Mar 12, 2010 (gmt 0)

Welcome to WebmasterWorld, alex123456.

You may consider using "onchange" on the <select> element as opposed to an onclick handler for each option.

alex123456



 
Msg#: 4096600 posted 9:14 pm on Mar 16, 2010 (gmt 0)

THX a lot!

I tried it, and it works.

junkiet

5+ Year Member



 
Msg#: 4096600 posted 11:43 am on Apr 4, 2010 (gmt 0)

use DOM, pls?

rocknbil

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



 
Msg#: 4096600 posted 6:52 pm on Apr 4, 2010 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved