Browse > Home /

Javascript getElementById Issue in Firefox

July 12, 2008

I'm working on an Javascript code. This web application is retrieving value from a couple of textbox fields and concatenate in result textbox field. I tested the web application in Internet Explorer and it work fine. But when I'm testing in Firefox, the value is not passed to the textbox field.

Here is the original code:

PLAIN TEXT
CODE:
  1. <HTML>
  2.  <HEAD>
  3.   <TITLE> Addition </TITLE>
  4.   <SCRIPT LANGUAGE="JavaScript">
  5.   <!--
  6.   function GetFullName()
  7.   {
  8.       document.getElementById('FullName').value = document.getElementById('FirstName').value + " " + document.getElementById('LastName').value
  9.   }
  10.   //-->
  11.   </SCRIPT>
  12.  </HEAD>
  13.  
  14.  <BODY>
  15.   First Name:<INPUT TYPE="text" NAME="FirstName"><br/>
  16.   Last Name:<INPUT TYPE="text" NAME="LastName"><br/>
  17.   <INPUT TYPE="button" align="right"  VALUE="Get Full Name" ONCLICK="GetFullName()"><br/>
  18.   Full Name:<INPUT TYPE="text" NAME="FullName">
  19.  </BODY>
  20. </HTML>

The workaround to this issue is to define the id property of all the textbox fields. See the updated code below:

PLAIN TEXT
CODE:
  1. <HTML>
  2.  <HEAD>
  3.   <TITLE> Addition </TITLE>
  4.   <SCRIPT LANGUAGE="JavaScript">
  5.   <!--
  6.   function GetFullName()
  7.   {
  8.       document.getElementById('FullName').value = document.getElementById('FirstName').value + " " + document.getElementById('LastName').value
  9.   }
  10.   //-->
  11.   </SCRIPT>
  12.  </HEAD>
  13.  
  14.  <BODY>
  15.   First Name:<INPUT TYPE="text" NAME="FirstName" ID="FirstName"><br/>
  16.   Last Name:<INPUT TYPE="text" NAME="LastName" ID="LastName"><br/>
  17.   <INPUT TYPE="button" align="right"  VALUE="Get Full Name" ONCLICK="GetFullName()"><br/>
  18.   Full Name:<INPUT TYPE="text" NAME="FullName" ID="FullName">
  19.  </BODY>
  20. </HTML>

Filed Under Javascript · Leave a Comment