...

View Full Version : button.value = variable doesn't work in Firefox



heritage
10-14-2008, 02:04 AM
The statement
button.value = variable
works fine in IE 6 but not in Firefox 3. Any suggestions for a fix?


Relevant code fragments:

The HTML document (written by php code) contains the hidden button
<input name="dateToChange" type="hidden" id="dateToChange" value="IntialValue">

elsewhere in the document there is a different button calling Javascript

<input name="button2" type="button" onClick="drawDiv('end_date')" value="Calendar">

The Javascript function is:
function drawDiv(formField)
{
var dateToChange = document.getElementById('dateToChange')
dateToChange.value = formField
}

Firefox will not change the value for sure and apparently won't even execute the last line.

Debugging alerts before the last line return 'object' for dateToChange and
'InitialValue' for dateToChange.value in both browsers.

Alerts after the last line return 'object' and 'end_date' for dateToChange.value from IE6 and the value of the button is changed

The same alerts never show in Firefox.

:confused:

Philip M
10-14-2008, 08:31 AM
Try this:-


function drawDiv(formField) {
document.getElementById("dateToChange").childNodes[0].nodeValue=formField;
}

Quizmaster: In nature, what invertebrate has a name which literally means "one hundred feet"?
Contestant: Giraffe

Kor
10-14-2008, 11:25 AM
Try this:-


function drawDiv(formField) {
document.getElementById("dateToChange").childNodes[0].nodeValue=formField;
}
Are you OK, Philip? How can you consider a nodeValue of a childNode of a text field? Does a text field (or any other form control) bear child nodes?

No. The problem could be that heritage gave a variable the same value as the id of an element (which have a neme also with the same value), which will confuse browsers. Change the variable, for instance:



function drawDiv(formField)
{
var dTC = document.getElementById('dateToChange');
dTC.value = formField
}


As a general rule: don't name variables, arguments, functions same as the id or name attributes of the document's elements.

Philip M
10-14-2008, 01:05 PM
Are you OK, Philip? How can you consider a nodeValue of a childNode of a text field? Does a text field (or any other form control) bear child nodes?



Sorry Kor, I must be still bemused after my strenuous holiday. :o
You won't believe it but my first thought was your solution (change the variable name) but then I thought that it was only IE which objected to the duplication, not Firefox, so if it worked in IE then that could not be the culprit. Aarrggghhh!

mrhoo
10-14-2008, 02:23 PM
<input name="button2" type="button" onClick="drawDiv('end_date')" value="Calendar">

document.getElementById will not return a value in firefox unless the element has an id that matches the argument-
IE6 will return an element that has either the id or the name.

Kor
10-14-2008, 02:35 PM
document.getElementById will not return a value in firefox unless the element has an id that matches the argument-
IE6 will return an element that has either the id or the name.
That element has an id.

There might be another problem. Is there a FORM element to nest the elements?

heritage
10-14-2008, 03:17 PM
Thanks to all. I am still amazed at how many nice people there are "out there".
I agree that the choice of variable name is dangerous so I changed that.
Unfortunately, none of the suggestions work. Changing the original code fragment:
dTC.value = formField
TO
alert(dTC)
alert(dTC.value)
dTC.value = formField
alert(dTC)
alert(dTC.value)

IE produces 'object' 'InitialValue' 'object' 'end_date' {if formField is end_date}
Firefox produces 'object HTMLInputelement' 'InitialValue' and then dies

I have tried many changes, some crazy, some silly like " verus ' which can be a hangup in php. Still stuck. Somehow Firefox thinks changing dTC.value is an error.

PS for last comment:
There are forms in the original HTML but the hidden input is not imbedded in a form.

Again; thanks for your time. Amazing

Kor
10-14-2008, 03:45 PM
ok. Post the whole HTML document (including the javascript codes) or show us a link to a test page. We need to be able to see/reproduce your error.

heritage
10-14-2008, 04:52 PM
Wow. Thanks. Much more than I expected.

Complete javascript is:
http://www.meiere.com/_PHP/_recreateCCU_2/calendar.js

The php code as text is:
http://www.meiere.com/_PHP/_recreateCCU_2/params.txt

Run that php code (to reproduce 'problem') as:
http://www.meiere.com/_PHP/_recreateCCU_2/volunteermonitoring/params.php?sites[]=1

(None of the require_once or login calls are relevant.)

Click on either button named "Calendar" to run the javascript.

Probably not relevant:
'View Data' will start at the beginning.
Get to this page by checking Highway 9

{I tried the links to calendar.js and params.txt in IE and Firefox. With IE, I had to save calendar.js first. Hope they give you what you asked.}

Kor
10-14-2008, 07:13 PM
Ok, solved. As I suspected, the problem was somewhere else:



x.style.top = window.event.y
x.style.left = window.event.x

This is an IE model of capturing and handling events. Those lines suppose to find where the user gives a click (absolute x,y position) and to place the calendar there. Well, Mozilla has other event model, thus it considers those lines as errors and stops the code run there. All you have to do is to use a small workaround. Insert in the HTML document the event argument (Moz needs that) when calling the function (see the blue):


...
<input name="button" type="button" onClick="drawDiv(event,'begin_date')" value="Calendar">
...
<input name="button2" type="button" onClick="drawDiv(event,'end_date')" value="Calendar">


And modify the drawDiv() function like this:


function drawDiv(e,formField)
{
var x = document.getElementById('mydiv')
var dTC = document.getElementById("dateToChange")

x.style.display = 'block'
!e?e=window.event:null; //IE:Moz
x.style.top = e.pageY?e.pageY+'px':e.y+'px'; // Moz:IE
x.style.left = e.pageX?e.pageX+'px':e.x+'px'; //Moz:IE
dTC.value = formField
}

heritage
10-14-2008, 07:56 PM
Perfect. I wish I could say Thank You in some more dramatic way.

I have always known that there are people out there smarter than I am.
It is not always that they are so nice.

Kor
10-14-2008, 08:09 PM
Your problem started the moment you have chosen a medieval calendar code. I bet it is written about 10 years ago, or so. Nor the way of general coding is more up to date. For instance:


<script language="JavaScript1.2" src="../calendar.js"></script>

language is deprecated. Now the browsers interpreters need type to know which kind of script have to handle. The luck is that javascript is the default scripting language, but it is safer and professional to specify the type


<script type="text/javascript" src="../calendar.js"></script>

heritage
10-14-2008, 08:15 PM
Thanks again. You are exactly correct -- this is old code from about 3 people back.
I fell into the trap of rushing. Hopefully I can avoid that in the future but you know how that goes.

Bet you are a great parent -- very patient.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum