I was right. The problem was that the select list was not being added to the form. And I finally figured out why theForm.appendChild() was failing. I had broken the DOM. I got in the habit years ago of putting <form> and </form> tags between the <table> and <tr> tags because certain browsers would put a carriage return or other space around the <form> tag. By putting them between the table elements where they're not supposed to go that problem went away and the form still worked. However, as I learned today, document.getElementById can't find the form when you do that.
So I fixed that and theForm.appendChild() added the select to the page, added it to the form properly, and when I submitted the form it worked. Hallelujah, right?
theForm.appendChild() puts the select list as the first item in the form, rather than in the nice new table cell I made for it. I need to move it. Is that possible? Even after fixing the DOM the td.appendChild() acted the same. It added the select to the page but not to the form so the variables were never parsed.
I suspect I can do this with theForm.insertBefore(theSelect, someOtherNode) but I can't figure out how. Everything I've tried fails.
So my questions are:
1. Is it possible to move a node after I insert it into the form? (Note, cloning the node and inserting the clone into the TD doesn't work.)
2. Is there a way to insert a node into a specific part of the DOM? (How do I get insertBefore to put the select into the TD AND still be part of the form?)
Any help would be greatly appreciated.