jquery - 在脚本中保留对话框的位置

Question

我有一个表格，我希望显示一个带有对话框的部分。

但是，当我将表单内的 div 分配给对话框时，它将位于脚本的底部，而不是表单元素内，因此我无法提交值。

喜欢：

<form>
<div id="dialog_container"><input name="test"></div>
</form>
<script> $('#dialog_container').dialog();</script>

在这种情况下，div 不会留在表单标签中。

你会如何解决这个问题？

谢谢！

Answer 1

我添加了同样的问题，我所做的是为我的每个对话框表单添加一个隐藏的输入。

然后在对话框关闭时，我可以用对话框中的值替换隐藏的输入。

像这样的东西：

<div id="dialog_container">
  <form id="dialog_form">
    ... any input ...
  </form>
</div>

<form id="main_form">
  <input type="hidden" id="test">
</form>

在javascript中类似：

  $("#dialog_container").dialog({
    close: function(ev, ui) { 
         var dialogInput // build inputs from dialogInputs
                         // you can even mix former inputs with new ones
         $("#test").replaceWith( dialogInput  )
    }
  });

Answer 2

像这样将标签放入对话框容器中：

<div id="dialog_container">
    <form>
       <input name="test">
    </form>
</div>

编辑

为什么不想在对话框中添加 onChange 事件，然后将这些值以原始形式放在隐藏字段中，或者从对话框表单中序列化 json 对象，然后将其放入隐藏字段中。

或者

使用这个 css 将该部分放入 div 中：

#dialog_container { 位置：固定；顶部：10px；左：10px；背景颜色：白色；显示：无；}

在用户点击打开对话框后，只需调用： $('#dialog_container').show();

演示：http: //jsfiddle.net/UpzSQ/5/