By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,877 Members | 1,109 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,877 IT Pros & Developers. It's quick & easy.

JS changes hidden value, IE predicts future

P: 3
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.

Expand|Select|Wrap|Line Numbers
  1. function chooseList(x)
  2.     {    
  3.         alert(document.getElementById('myHiddenField').value);    
  4.         document.getElementById('myHiddenField').value=x;
  5.         alert(document.getElementById('myHiddenField').value);    
  6.         document.getElementById('myForm').submit();            
  7.     }
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:
Expand|Select|Wrap|Line Numbers
  1. <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!)
Apr 11 '09 #1
Share this Question
Share on Google+
6 Replies

P: 428
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.
Apr 12 '09 #2

P: 3
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.

Expand|Select|Wrap|Line Numbers
  1. function chooseList(x)
  2.     {    
  3.                 alert(typeof(x));
  4.         x= parseInt(x);
  5.         alert(typeof(x));
  6.         document.getElementById('myHiddenField').value=x;
  7.         var qwerty = document.getElementById('myHiddenField').value;
  8.         alert(typeof(qwerty));
  9.     }
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!
Apr 12 '09 #3

Expert Mod 15k+
P: 16,027
The value is always a string even if you set it to an integer.

Show the HTML code for the select element.
Apr 13 '09 #4

P: 3
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.
Apr 15 '09 #5

Expert Mod 5K+
P: 8,639
info: FireBug (Firefox extension) is able to show you the complete HTTP request (including POST data)
Apr 15 '09 #6

Expert Mod 15k+
P: 16,027
It's an IE bug. document.getElementById() should only get an element by its ID, not its name.
Apr 16 '09 #7

Post your reply

Sign in to post your reply or Sign up for a free account.