Forum:

HTML Pages with CSS and JavaScript

document.getElementById("id").value is not supported in firefox

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi All,

I have written a javascript function which runs fine in IE but when it comes down to Firefox it just craps evrything up. The function is not working at all. When I tried to find the reason I found that document.getElementById("id").value is not getting populated. Can anyone help me in it?
Here is the code:

I am sorry but I can not post entire code in here for security reasons. Please have a look at this snippet and let me know what is wrong in there.

Thanks in Advance

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Do you actually have an id="txtSearch" on your element?

Eric

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

Yes I actually have id as txtSearch. Actually this is the id of the text box which the user will be using to input search string.The id is just for convience and the same code is working just fine in IE6 and above.

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you used firebug [www.getFirebug.com] to add break points and see what is happening? Are you cached in Firefox with some old version? [Ctrl-R]

Eric

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

yes I have used FireBug but of no use as such. It is saying that the object is null. The value is not getting supported and the object is displayed as null for this.

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

does alert(v1); say it is an object?

Can you write a dummy page with just the basics and recreate the error?

Without more info there is not much that I can do to help you.

Eric

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

This is the message what fireBug gave to me when I tried to run that function:

document.getElementById("txtSearch") is null
displayAddResults()lookup.js (line 278)
onclick(click clientX=874, clientY=93)lookupMa...yRg%3D%3D (line 2)
[Break on this error] var v2 = document.getElementById("txtSearch").value;

The alert is displaying null

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

if the statement alert(document.getElementById("txtSearch")) gives you null, than that is telling me that you DO NOT have an element with an id="txtSearch" listed on the page or you are calling it before it is rendered to the page.

Reason why IE might be working is that IE says if it does not have an id of "txtSearch", it looks for a name="txtSearch", which is flat out wrong.

Eric

Paul Yule

Ranch Hand

Posts: 230

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Would it be possible to post just the <input> tag declaration in your html. If it's created via script of some kind view the source after it's loaded and show the input tag then?

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

The id is there. I have used struts tags to define that text box. Here is the code:

<%@ page language="java" import="java.util.*,nielsen.budgetforecast.lookup.struts.CostCenterLookupForm" pageEncoding="ISO-8859-1"%>
<%@ page import="nielsen.budgetforecast.lookup.struts.CostCenterLookupForm"%>
<%@taglib prefix="html" uri="/tags/struts-html" %>
<%@taglib prefix="logic" uri="/tags/struts-logic" %>
<html:html>
  <HEAD>
	<TITLE>Lookup Manager</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="./style/LookupManager.css"/>
	<SCRIPT type="text/javascript" src="./javascript/lookup.js"></SCRIPT>
	<script TYPE="text/javascript">
	if(document.getElementById('LU_manager')){
		document.getElementById('LU_manager').style.fontWeight = "bold";
	}
	function refreshResourceTable(){
		document.getElementById('res1').value = "";
		document.getElementById('res2').value = "";
		document.getElementById('res3').value = "";
		document.getElementById('res4').value = "";
		document.getElementById('res5').value = "";
	}
	</script>
</HEAD>
<BODY class="bodyMargin">
   <html:form action="/lookup/LookupManagerSave.do?type=saveLookupEntry">
		<TABLE BORDER="0"    id="table1" class="tblBrdLftRhtTop tblBdrStyle">
 		
 			<tr>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix" >
 				<font class="fontFacAerial fontSize2 fontClr707276">Choose Lookup :</font>   
 				<html:select name="CommonLookupForm" property="lookupSelection" tabindex="1">
 						<html:option value="none">Please select</html:option>
 						<logic:notEmpty name="CommonLookupForm" property="lookupList">
 							<html:optionsCollection property="lookupList" value="lookup_name" label="lookup_name" />
 						</logic:notEmpty>
 				</html:select>   
 				<img     />
 				</td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<img  ></td>
 				
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<html:text property="txtSearch" name="CommonLookupForm" onkeydown="javascript:return checkEnterEvent('Find');" size="20" tabindex="1"></html:text>   
 					<img     />
 				</td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<img  ></td>
 				
 				<td  class="txtCntrAlign tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix" >
 					<font class="fontFacAerial fontSize2 fontClr707276">Add Lookup :</font>
 				</td>
 				<td  class="txtCntrAlign tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix">
 					<img     /></td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix">
 					 </td>
 			</tr>
 		</TABLE>
		 </html:form>

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Showing Struts source in an HTML forum is useless. How is anyone supposed to know what the Struts tags generated? SHow the generated HTML.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here is the generated Html for you:

<html>
  <HEAD>
	<TITLE>Lookup Manager</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="./style/LookupManager.css"/>
	<SCRIPT type="text/javascript" src="./javascript/lookup.js"></SCRIPT>
	<script TYPE="text/javascript">
	if(document.getElementById('LU_manager')){
		document.getElementById('LU_manager').style.fontWeight = "bold";
	}
	function refreshResourceTable(){
		document.getElementById('res1').value = "";
		document.getElementById('res2').value = "";
		document.getElementById('res3').value = "";
		document.getElementById('res4').value = "";
		document.getElementById('res5').value = "";
	}
	</script>
</HEAD>
<BODY class="bodyMargin">
   <form name="CommonLookupForm" method="post" action="/budgetforecast/lookup/LookupManagerSave.pg?type=saveLookupEntry">
		<TABLE BORDER="0"    id="table1" class="tblBrdLftRhtTop tblBdrStyle">
 		
 			<tr>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix" >
 				<font class="fontFacAerial fontSize2 fontClr707276">Choose Lookup :</font>   
 				<select name="lookupSelection" tabindex="1"><option value="none">Please select</option>
 						
 							<option value="Platform">Platform</option>
 <option value="Job Title">Job Title</option>
 <option value="Location">Location</option>
 <option value="Resource">Resource</option>
 <option value="Department">Department</option>
 <option value="Cost Center">Cost Center</option>
 <option value="Vendor">Vendor</option>
 <option value="Initiative">Initiative</option>
 <option value="Project Category">Project Category</option>
 <option value="Cost Category">Cost Category</option>
 <option value="Estimate Type">Estimate Type</option>
 <option value="Functional Group">Functional Group</option>
 <option value="Funding Status">Funding Status</option>
 <option value="Segment">Segment</option></select>   
 				<img     />
 				</td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<img  ></td>
 				
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<input type="text" name="txtSearch" size="20" tabindex="1" value="" onkeydown="javascript:return checkEnterEvent('Find');">   
 					<img     />
 				</td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix"  >
 					<img  ></td>
 				
 				<td  class="txtCntrAlign tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix" >
 					<font class="fontFacAerial fontSize2 fontClr707276">Add Lookup :</font>
 				</td>
 				<td  class="txtCntrAlign tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix">
 					<img     /></td>
 				<td  class="tdBdrNoneMedium bgClrFFFFFF backgroundImgBG_1pix">
 					 </td>
 			</tr>
 		</TABLE>

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Aparna Raghavan

Greenhorn

Posts: 9

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

if you see the html code, the name is txtSearch and not the id.. thats why it is working in IE and not in firefox... as told , if IE does not find the id it will look for name. firefox doesn't.

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Does that mean that I need to change all the getElementById in to getElementsByName?
But this is gonna create more trouble I guess

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just one question Eric..
What does this mean??

Eric Pascarello Today 5:26:09 PM Subject: document.getElementById("id").value is not supported in firefox

--------------------------------------------------------------------------------

view plaincopy to clipboardprint?
document.forms[0].elementName.value = "I like cheese";
document.forms[0].elementName.value = "I like cheese";

Eric

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Eric Pascarello

author

Posts: 15385

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That is how you reference an element in a form with its name.

Eric

Aalok Mishra

Ranch Hand

Posts: 41

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Eric,

thanks for the tip.

Thanks and Regards,
Aalok Mishra
InfoCepts, LLC

Paul Yule

Ranch Hand

Posts: 230

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Just beware that name is non-unique whereas id is. Name will get submitted with the value of your input when you post. General use is for checkboxes and radio buttons so they may share the same name with different values.

Edit: also, if I recall there is an attribute when you create the struts tag called style-id that creates the DOM id as you would with regular HTML. You maybe able to use that instead of name.