JavaScript Function only work in IE8 not Chrome, Firefox or Safari.

hums
hums used Ask the Experts™
on
The JavaScript functions ( onload="initialize()" and onsubmit="showAddress(this.address.value); return false">) are only working with IE8 and not the other browsers. Does any know why this is happening ?
<!--  <script src="http://maps.google.com/maps?file=api&amp;v=3.2&amp;"
      type="text/javascript"></script>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2010,2011 Interactive Digital Devices Inc. All rights reserved.
 -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Address finder with area map and street map." /> 
    <title>IDD Tech Maps </title>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
      <script type="text/javascript" src="JScriptMaps.js"> </script>  
 
  </head>
 
  <body onload="initialize()" >
    <form action="#" onsubmit="showAddress(this.address.value); return false">
     <div id="topcontainer" style="width:80%; " align="center">
      <p>
        Enter an address (as complete as possible) and click Go. <input type="text" style="width:350px" name="address" value="" /> <input type="submit" value="Go!" />
        <!--    <input type="text" style="width:350px" name="address" placeholder="Type in Address"  /> Not supported by IE 8-->
        <br/>
        A local area map and detailed location map will be displayed. Future enhancements will include displaying local businesses.
      </p>
   </div>
     <div id="container" 
          style="width:100%;overflow:hidden; height:90%; " >
          <div id="map_canvas"  
              style="border-style: dashed; border-width: thin; padding: 5px; margin: 5px; float:left; width: 400px; height: 440px; "></div>
          <div id="map_canvas1" 
              style="border-style: dashed; border-width: thin; padding: 5px; margin: 5px; float:left; width: 400px; height: 440px; "></div>
     <div id="adContainer" >
          <script type="text/javascript">
              google_ad_client = "pub-1234567890123456";
              /* 160x600, created 10/13/10 */
              google_ad_slot = "7735684842";
              google_ad_width = 160;
              google_ad_height = 600;
        </script>
        <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
     </div>
    </div>
    </form>
   <p>
      Copyright &#169 IDD,Inc. 2010,2011 All rights reserved.
   </p>
 
  </body>

</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Fixer of Problems
Most Valuable Expert 2014
Commented:
In line 28 of 'JscriptMap.js',    

var address = document.getElementById("address").value;  

is 'null' according to Firefox.  And it would be because you don't have an 'id' attribute in the form for

<input type="text" style="width:350px" name="address" value="" />

IE sometimes uses the 'name' as the 'id' but the other browsers won't.

Author

Commented:
That was the problem. Thanks for the information.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial