Question

I have code that looks like the following:

<form id="MyForm" name="MyForm" method="post" action="index.php">

<input type="text" id="Input1" name="Input1">
<input type="text" id="Input2" name="Input2">

<div id="dialog">
<input type="text" id="Input3" name="Input3">
<input type="text" id="Input4" name="Input4">
</div>

<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button>
<input type="submit" value="Submit">

</form>

I can put the second part of the form in a JQueryUI dialog box, Input3 & Input4 do not appear in the POST data. Is it possible to do this?

Answer 1

Edited to not specify input names.

$('#dialog').bind('dialogclose', function(event, ui) {
    $('#dialog :input').each(function(index) {

      $("#myForm").add('<input>').attr({
        type: 'hidden',
        id: $(this).attr('id')
      });
    });
});