Question

I have dynamically created option elements with javascript. I double click an option from one select field to transfer it to a second, disabled, multiple select field. This works fine. The problem appears when I go to submit the form with the new information. The second select field is not passed to PHP. I’m assuming it thinks its empty, but each of the options I added are selected by default and I visually see them all there. I’ve been looking around for a solution to this, but am having little luck. Everything I can find says that the most likely cuprit is a browser incompatibility or that the elements are not being added to the form. If it is a browser incompatibility issue, I’ve tried it on all the major browsers all with the same results, so I would like to know which one I’m missing (FF, Chrome, IE). As for not being added to the form, I don’t see how that could be possible. The select element already exists in the form and I am merely appending new options in it. Am I missing something, or is this just not possible?

<script type="text/javascript" language="JavaScript">
function addModule(value, title) {
    modules = document.getElementById('modules');
    modules.options[modules.options.length] = new Option(title, value, true);
}
</script>
<form name="addModules" method="POST" action="submit.php">
<select name="moduleList" size="20" ondblclick="addModule(this.options[this.selectedIndex].text, this.value);">
<?php //dynamically created options from PHP ?>
</select>
<select id="modules" name="modules[]" multiple="multiple" size="20" DISABLED></select>
<input type="submit" value="Add Modules" />
</form>

Answer 1

Disabled fields are not submitted. The easiest solution is to change it to readonly. If you’re determined to have it as disabled, you could make a hidden field that is updated with values from it, but I strongly suggest just using readonly and then trying to style it as desired.