Include part of form in jQueryUI dialog box

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')
      });
    });
});

Answer 2

The problem you have is that when you call dialog on your DIV, the DIV is detached from the DOM and reattached at the end of the document (outside the form then)

If you really want a jQuery dialog to handle this, maybe you can try to remove the dialog from the DOM and put it back inside the form.

all of this is untested :

<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="hereismydialog">
<div id="dialog">
<input type="text" id="Input3" name="Input3">
<input type="text" id="Input4" name="Input4">
</div>
</div>


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

</form>

When the document is ready you do :

// prepares the dialog, that will remove it from its location in the document and
// put it at the end
$('#dialog').dialog({ autoOpen: false });

// put it back where it was
$('#dialog').parent().detach().appendTo('#hereismydialog');

Again, all of this is untested, I would try this with firebug/firequery at the ready.

Answer 3

Brian, Have you considered using hidden input fields and then just updating the hidden fields when the dialog has been completed? This would save you from having to do any annoying DOM manipulations.

Answer 4

If hidden input fields are not an option, what about adding event handlers to the dialog's form (i.e. duplicates of the real inputs) that set the values of the real form?

If you don't want to do this because you don't want the original form to be cluttered with what should be in a dialog, you can just yank those inputs out of the screen (i.e. position it to the far left, ala image replacement) or set them to display:none (if that won't stop browsers from submitting their values). Of course you can also use hidden inputs for trivial input fields (file uploads can't be faked like that).

The problem with jQueryUI dialogs is that they get torn out of the DOM, so you can't rely on their inputs unless the entire form is contained in them. You can make their inputs behave like proxies, though.

Answer 5

It's a little ugly, but you could contain the non-dialog controls in a separate div, intercept the submit and append them, using .each() round non-dialog selector, to the outgoing POST...