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:

CODE:
  1. <script>&lt;br /&gt;
  2.   &lt;!--&lt;br /&gt;
  3.   function GetFullName()&lt;br /&gt;
  4.   {&lt;br /&gt;
  5.       document.getElementById('FullName').value = document.getElementById('FirstName').value + " " + document.getElementById('LastName').value&lt;br /&gt;
  6.   }&lt;br /&gt;
  7.   //--&gt;&lt;br /&gt;
  8.   </script>
  9. First Name:<input name="FirstName" type="text" />
  10.  
  11. Last Name:<input name="LastName" type="text" />
  12.  
  13. <input onclick="GetFullName()" type="button" value="Get Full Name" />
  14.  
  15. Full Name:<input name="FullName" type="text" />

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

CODE:
  1. <script>&lt;br /&gt;
  2.   &lt;!--&lt;br /&gt;
  3.   function GetFullName()&lt;br /&gt;
  4.   {&lt;br /&gt;
  5.       document.getElementById('FullName').value = document.getElementById('FirstName').value + " " + document.getElementById('LastName').value&lt;br /&gt;
  6.   }&lt;br /&gt;
  7.   //--&gt;&lt;br /&gt;
  8.   </script>
  9. First Name:<input id="FirstName" name="FirstName" type="text" />
  10.  
  11. Last Name:<input id="LastName" name="LastName" type="text" />
  12.  
  13. <input onclick="GetFullName()" type="button" value="Get Full Name" />
  14.  
  15. Full Name:<input id="FullName" name="FullName" type="text" />