Include part of form in jQueryUI dialog

Question

I have a code that looks like this:

<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 the JQueryUI dialog box, Input3 and Input4 are not displayed in the POST data. Can this be done?

Answer 1

Edited to not indicate 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 is that when you invoke a dialog on your DIV, the DIV detaches from the DOM and rejoins the end of the document (outside the form)

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

all this has not been verified:

<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>

, :

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

, , firebug/firequery .

Answer 3

. :

  $("#trigger_link").click(function(event) {
    // Dialog creation
    $("div#form_part").dialog({autoOpen: false, buttons: {"OK": function() {$(this).dialog("close");}}});
    $("div#form_part").bind(
      'dialogclose', 
      function(event) {
        $(this).dialog("destroy");
        $(this).appendTo("#form").hide();
      }
    );
    // Displaying
    $("#div#form_part").dialog('open');
    event.preventDefault();
    return false;
  });

Answer 4

, , , ? - DOM.

Answer 5

, (.. ), ?

, , , , (.. , ala) display:none ( ). , hidden ( ).

jQueryUI , DOM, , . , .

Answer 6

This is a little ugly, but you can contain the controls without a dialog in a separate div, intercept submit and add them using a round selector without binding .each () to the outgoing POST ...