Включить часть формы в диалоговое окно jQueryUI

Question

У меня есть код, который выглядит следующим образом:

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

Я могу поместить вторую часть формы в диалоговое окно JQueryUI, Input3 и Input4 не появляются в данных POST. Возможно ли это сделать?

Answer 1

Отредактировано, чтобы не указывать входные имена.

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

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

Answer 2

Просто уничтожьте диалог и переместите все его содержимое обратно после закрытия. Как это:

  $("#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 3

Проблема, с которой вы столкнулись, заключается в том, что когда вы вызываете диалоговое окно на DIV, DIV отсоединяется от DOM и повторно присоединяется в конце документа (затем вне формы)

Если вы действительно хотите, чтобы диалог jQuery справлялся с этим, возможно, вы можете попытаться удалить диалог из DOM и вернуть его обратно в форму.

все это не проверено:

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

Это немного уродливо, но вы могли бы содержать элементы управления без диалогов в отдельном элементе div, перехватывать отправку и добавлять их, используя круглый диалогический переключатель .each (), к исходящему POST ...

Answer 5

Если скрытые поля ввода не доступны, как насчет добавления обработчиков событий в форму диалога (т. Е. Дубликаты реальных входных данных), которые устанавливают значения реальной формы?

Если вы не хотите делать это, потому что вы не хотите, чтобы исходная форма была загромождена тем, что должно быть в диалоге, вы можете просто вытащить эти входные данные за пределы экрана (т.е. расположить их в крайнем левом углу , аля замена изображения) или установите их на display:none (если это не помешает браузерам отправлять свои значения). Конечно, вы также можете использовать hidden входы для тривиальных полей ввода (загрузка файлов не может быть так подделана).

Проблема с диалогами jQueryUI заключается в том, что они вырываются из DOM, поэтому вы не можете полагаться на их входные данные, если в них не содержится вся форма. Вы можете сделать так, чтобы их входы вели себя как прокси.

Answer 6

Брайан, Рассматривали ли вы использование скрытых полей ввода, а затем просто обновить скрытые поля, когда диалог будет завершен? Это избавит вас от необходимости делать какие-либо раздражающие манипуляции с DOM.