[RESOLVED] Select elements stripped after JS update in Firefox

[frankmoore]

Hi all,

First time poster with a question that, quite frankly, has me stumped.

My app has a form in which I prevent users from modifying previously filled out fields directly. Instead, when a user attempts to edit a field that has data, I open a div which captures the content from the original fields and lets the users manipulate it there. When I close the div, I use javascript to update all of the original fields on the form with any changes.

The code works fine in all instances except when I'm trying to update a single-item select control using Firefox. In this one instance, the field is available on the page when I try to access it using javascript (I set up an onsubmit function that showed me the value and selected index of single-item selects) but it is effectively stripped from my form afterwards. Such that the server code which processes he post does not even see the selects listed in the parameters.

Again, the only time I see this is when I try to submit a form in which I've modified the data in a select using javascript. I'm curious to know if anyone else has seen behavior like this and, more importantly, what I can to to prevent this.

Thanks.

[Kor]

Not very clear. But why don't you make your elements readOnly to prevent the attempt of filling the already filled filled elements.

Regarding the SELECT element, you may use a trick: pass the selected value to a hidden input field and make the select element disabled immediately after the first choice:

<select onchange="selectVal.value=this.value;this.disabled=true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="hidden" name="selectVal">

[frankmoore]

Without going into too much detail about the application, disabling the field upon changing the value will not suit my purposes.

The use case is that the user is allowed to modify field values as many times as they want when initially filling out the form. However, once they save (i.e., submit) the form, any values they've entered are considered protected and editing them can only be done through controlled processes.

[Kor]

editing them can only be done through controlled processes.

like?

[frankmoore]

As I described, the app opens a DIV containing the content of the fields from the form which make up the data item in question. The DIV also contains a field where the user must enter their reason for changing the data.

[Kor]

The code works fine in all instances except when I'm trying to update a single-item select control using Firefox. In this one instance, the field is available on the page when I try to access it using javascript (I set up an onsubmit function that showed me the value and selected index of single-item selects) but it is effectively stripped from my form afterwards. Such that the server code which processes he post does not even see the selects listed in the parameters.

OK. Understood, Now let's see your code which does that. Or a link to a test page.

[frankmoore]

Problem solved.

In order to prevent the user input into the select control, I disable each unselected options during page load. When I open the editing DIV, I remove the disabled tag the options.

The problem was that, when I set the option's selected property to true, I was not resetting its disabled property to false. Firefox knew that the selectedIndex of the control was disabled and, therefore, did not include it in the request. IE is a little more forgiving (I'm being polite here) and it had no problems sending a disabled option value to the server.