www.webdeveloper.com
Results 1 to 6 of 6

Thread: Form fields missing from submitted data after having been modified using innerHTML

Threaded View

  1. #1
    Join Date
    Jan 2006
    Location
    South Africa
    Posts
    62

    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.

    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.

    Like so:

    Code:
    <p>First select your province:</p>
    <select id="province" name="province" 
      onchange=ajaxRead(this.options[this.selectedIndex].value, \'city\')">
    <option selected="selected" value="0">Select province</option>
    <option value="1">Northern Province</option>
    <option value="2">North West</option>
    ...
    </select>
    
    <p>Then select your city:</p>
    <div id="city">
    <select name="city">
    <option selected="selected" value="0">Select city</option>
    </select>
    </div>
    The ajaxRead() call retrieves correctly formatted HTML code for the entire <select> dropdown box depending on user input, e.g. like so:

    Code:
    <select name="city">
    <option value="1">Johannesburg</option>
    <option value="2">Pretoria</option>
    ...
    </select>
    The actual modifications to the contents of the <div id="city"> .. </div> are made by the following Javascript code:

    Code:
    document.getElementById(obj).innerHTML = data;
    in which obj refers to the div, and data to the retrieved HTML code.

    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.

    If I do not run the above javascript code to update the div's innerHTML, all is fine, and the input (with its only option which is set to a value of 0) is submitted correctly. However as soon as I do modifiy the div's innerHTML, thereby replacing the <select>...</select> section with the code retrieved by the ajaxRead() call, it disappears from the submitted form 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!!

    // Frank
    Last edited by frankvw; 10-15-2009 at 09:00 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles