jQuery Forum

I think i need a little help please.

There appears to be a difference in the result of a replaceWith() between IE and Firefox. So I am hoping its something silly that I have done.

I am trying to change a text field into a dropdown list depending upon a previous select of a Country from a dropdown. Nothing near rocket science so far.

Initially the form is loaded with the state/province field as a <input type="text">

When the country is selected I run a ajax call to collect a <select><option></option></select> piece of html if I have states for the selected Country on my database or i replace the text field with itself.

Initial state of html form

1. <tr>
2.    <td align="right"><strong>State / Province<span class="red">*</span></strong></td>
3.    <td align="center"><strong>:</strong></td>
4.    <td align="left">
5.       <input type="text" name="state" id="state" class="textfield" value="<?php echo set_value('state'); ?>"/>
6.     </td>
   

Javascript I use to make ajax call and return some html:

1. $(document).ready( function() {
2.   $("#country").change(function() {
3.     $.post( "<?php echo site_url('client_ajax/get_country_states'); ?>",
4.            { iso: $('#country').val() },
5.            function(data) {
6.                     //alert( $('#signup').serialize() );
7.                     $('#state').replaceWith(data);
8.                     //alert( $('#signup').serialize() );
9.             });
10.        });
11. });

The HTML code returned by the $.post ajax call:
i.e. the contents of (data)

1. <select name="state" id="state" class="textfield2"><option value="0" >Select</option><option value="Capital Territory" >Capital Territory</option><option value="New South Wales" >New South Wales</option><option value="Northern Territory" >Northern Territory</option><option value="Queensland" >Queensland</option><option value="South Australia" >South Australia</option><option value="Tasmania" >Tasmania</option><option value="Victoria" >Victoria</option><option value="Western Australia" >Western Australia</option></select>
   

Now this works visually. In other words the text field changes into a dropdown and the dropdown contains the correct options.

However after the replaceWith has been run the state field is never POSTED back to the server.
This is the result of the 2 alerts before and after the replaceWith call

Before replaceWith():

1. quantity=1&companyname=&first_name=&last_name=&email=&conemail=&country=AU&address1=&address2=&city=&zipcode=&state=&phone=&select=1

After replaceWith():

1. quantity=1&companyname=&first_name=&last_name=&email=&conemail=&country=AU&address1=&address2=&city=&zipcode=&phone=&select=1

note that the state field is no longer in the list.

In IE the field exists and the value is posted back to the form when the submit button is pressed.
BUT in FF or Chrome or Safari(windows) the field no longer exists and is not posted back to the server?
When I query the DOM with Firebug the form no longer appears to have the state field. It does show on the screen though in all browsers I have tried.

I assume that IE is not the only browser that is doing the right thing so I must be doing something silly, has anybody got an idea what?

Thanks