jQuery Form, ajaxForm(), does not process radio button in IE when it is set by Javascript

jQuery Form, ajaxForm(), does not process radio button in IE when it is set by Javascript

I set a radio button from data returned by Google Map, like so:

countryCode = results[0].address_components[i].short_name; 
$
('input[type=radio][name=country]').prop('checked', false);
$
('input:radio[name=country]').each(function() {
if
($(this).val() === countryCode) {
$
('#' + countryCode).prop('checked', true);
}

});

This sets a country abbreviation, e.g., US as the value of a radio button. The HTML for the radios look like (there are several):

<label><input type="radio" id="US" name="country" 
form
="dataInput" value="US" />United States</label>

After user input of other data, the submit fires jQuery's Form plug-in. I'm using version 3.46-2013.11.21 The command is:

$('#dataInput').ajaxForm( submitOptions );

The submitOptions object contains parameters. An alert right before this line shows that the country radio button still has the proper data.

The PHP picks up the data with the following statement:

$country = $_POST['country']; 
//for IE, PHP says Notice: undefined index: country

And with IE, generates a validation error back to the user who has entered correct data.


All the above works in Firefox and Chrome, in many versions. It does not work in IE 8 through 11. When the HTML is changed, as a test, to include checked="checked", IE 11 picks up the country, but it then does not pick up the next input, the state. Firefox and Chrome are OK. As the last bit of this long running mystery (for me, anyway) is that several other radio buttons for other things, set by checked="checked" in the HTML work fine in all IE versions tested.


How do I get the country radio button, set via Javascript, to pass through to the PHP server in an IE browser? I've worked many hours on this. Please be specific. I can provide more info, if necessary.