JS changes hidden value, IE predicts future

[FrankF]

Two years ago, member acoder gave patient help to a newbie whose function worked in IE but not in Firefox. I have a similar problem, but mine works fine in Firefox and exhibits astonishing behavior in IE.

function chooseList(x)
    {    
        alert(document.getElementById('myHiddenField').value);    
        document.getElementById('myHiddenField').value=x;
        alert(document.getElementById('myHiddenField').value);    
        document.getElementById('myForm').submit();            
    }

The function is a simple two-liner. I have added the alert boxes to help me see what is going on.

In Firefox, the following happens, which is exactly what I intended to happen:

The function is called by onChange in a Select box and a new value is passed to the function.
1. The first alert shows the current value of the hidden field.
2. The value of the hidden field is changed to the new value, x.
3. The second alert shows the new value.
4. The form is submitted, passing along the new value.

In IE7, the following happens:
1. The first alert shows x, the new value of the hidden field, although the line of code which changes the value has not yet run!
2. The value is presumably changed now. ?
3. The second alert shows the new value, and is the same as the first alert.
4. The form is submitted, but no value is passed on for the hidden field!!!

The hidden field is:

<INPUT ID="myHiddenField"  NAME="myFieldName"  TYPE="Hidden" VALUE=1>

So there are two problems here. I would be grateful for any help in getting IE7 to behave when carrying out this function. Remember: it all works flawlessly in Firefox 3. Thank you!
BTW, the thread is showing spaces in the word 'value' in my function. These spaces are not in my code, not showing in the preview window and I cannot edit them out. (Sorry for not using code tags!)
Frank

[mrhoo]

Is it possible that you do not have values defined for the options of the select element?

I mention this because in the absence of value attributes, browsers other than IE default to using the text content of the selected option as the value, and IE does not, in scripts. They all submit the text if there is no value, however.

[FrankF]

Thank you for your response! Following the direction you suggest, I have checked as to how the variable is being assigned to the hidden field. I discovered that the variable is being passed to the function as a string. This does not bother Firefox, but maybe IE cannot handle it.

function chooseList(x)
    {    
                alert(typeof(x));
        x= parseInt(x);
        alert(typeof(x));
        document.getElementById('myHiddenField').value=x;
        var qwerty = document.getElementById('myHiddenField').value;
        alert(typeof(qwerty));
    }

The variable x is an integer passed as a ColdFusion variable to the function. The first alert tells me that x is now a string, so in the next line of the function I convert it to a number. The second alert shows "number". Then I assign that number as the value of the hidden field. When the third alert pops up, it shows that the number has been converted back to a string! When the hidden value is passed on to the next page, in Firefox the value is passed on. In IE it reverts to the default value of zero, because for some reason it is not being passed on. I will keep plugging away at this one!

[acoder]

The value is always a string even if you set it to an integer.

Show the HTML code for the select element.

[FrankF]

I discovered the cause of the problem. My Select box had no ID, but its Name was the same as the ID of the Hidden Field. Careless coding on my part.

Firefox and IE handle the situation differently. IE was allowing the Javascript "getElementById" to change the value of the select box even though it didn't have an ID attribute. Then it did not change the value of the following hidden field because it had already changed a control with the same Name as the hidden field's ID.

Firefox changed the values of both the Select box and the hidden field, and thus covered up the damage done by my code. Problem solved after several hours of debugging, including changing the form method to Get, after which I could see exactly what data was being passed.

[Dormilich]

info: FireBug (Firefox extension) is able to show you the complete HTTP request (including POST data)

[acoder]

@FrankF
It's an IE bug. document.getElementById() should only get an element by its ID, not its name.