Question

I have an HTML5 page with several data inputs inside a jQuery Dialog box. I sweep this data into form processing with the input attribute form=dataInput. It works fine in Firefox and Chrome, but not in IE because IE does not support the input form attribute. Something about the Dialog widget makes input box elements ‘invisible’ to form processing. The form attribute fixes this for browsers that support HTML5, but no released IE has this support. I tried $(‘.ui-dialog’).appendTo(‘form’); in the Dialog open: option, but it does not fix the problem. Is there a way to get IE to sweep input data out of a Dialog widget and into $_POST ?

Here is a sample of an input box inside the Dialog

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

I use the jQuery Form plug-in to perform the submit. It has some options, like beforeSubmit and beforeSerialize, but I don’t understand the documentation or the submit process well enough to know if they can be used to solve this problem. Please be specific with code or tutorials. I’m new enough to this that I don’t follow general instructions well. 😉 (BTW, IE has the other feature support I need, just not this one.)

Here’s my code with Andrew Hagner’s suggestion and my modification. Dialog works, but IE does not set a value for the country. What needs to change?

var countrySelected = $("input[type=radio][name=country]").val(); //set earlier by W3C geocoding
var countryChooser = $('#countryChoices').dialog( {       
    autoOpen: false,
    bgiframe: true,
    height: 300,
    width: 850,
    resizable: false,
    draggable: true,
    title: "Click to select another country",
    open: function () {
            $('#regions').tabs(
                {
                event: "mouseover",
                })
        },
    buttons: {
        'Close / continue location input': function ()
                {
                countrySelected = $('input[name=country]:checked').val();
                $(this).dialog('close');
                }
            } 
});
//then later on
getCityFromGeonames3Step(countrySelected);

Answer 1

Updated:

// Before you enter dialog, assign the element you will
// be grabbing the info from to a variable.
var countrySelectionElement = $("input[type=radio][name=country]").val(); 
var countrySelected = "";

var countryChooser = $('#countryChoices').dialog( {       
autoOpen: false,
bgiframe: true,
height: 300,
width: 850,
resizable: false,
draggable: true,
title: "Click to select another country",
open: function () {
        $('#regions').tabs(
            {
            event: "mouseover",
            })
    },
buttons: {
    'Close / continue location input': function ()
            {
            // Since jQuery won't work in here, use the variable
            // we assigned above to access value.
            countrySelected = countrySelectionElement.val();
            $(this).dialog('close');
            }
        } 
});

//then later on
getCityFromGeonames3Step(countrySelected);

Original:

Before you open the dialog assign the input to a variable:

function OpenDialog()
{
    var input = $("yourinput");

    // Open dialog, use input to work with that element.

    // If you want you can then place the entered data in a hidden field
    // using jQuery, in the same way we are using input here. Then you will
    // be able to post that data back however you like.

}

I had this problem the other day, I found this solution on jQuery’s Dialog site.
http://jqueryui.com/demos/dialog/#modal-form