Form fields missing from submitted data after having been modified using innerHTML
Can anyone shed some light on the following? Because I'm totally stumped. :confused:
I have a basic HTML form. I am using some AJAX-ish scripting to modify a <select> dropdown box depending on user input. E.g. after the user selects a province, the <select> below it is populated with cities in _that_ province.
The ajaxRead() call retrieves correctly formatted HTML code for the entire <select> dropdown box depending on user input, e.g. like so:
<p>First select your province:</p>
<select id="province" name="province"
<option selected="selected" value="0">Select province</option>
<option value="1">Northern Province</option>
<option value="2">North West</option>
<p>Then select your city:</p>
<option selected="selected" value="0">Select city</option>
in which obj refers to the div, and data to the retrieved HTML code.
document.getElementById(obj).innerHTML = data;
This all works as expected, and all is fine until I start processing the submitted form data. When I examine the submitted data, I find that the modified input (i.e. 'city') is missing from the submitted data.
The code retrieved by ajaxRead() is properly formatted HTML, and using the 'view generated source' option in the Firefox WebDeveloper toolbar reflects this.
Update: I experience this behavior both in Firefox 3.5 and IE7.
Is there anyone who can point me into the right direction? I've been banging my head against the wall for two days now and it's starting to feel a bit sore.
All response appreciated!!