将值传递给 jquery 对话框表单答案

【问题标题】：pass value to jquery dialog form将值传递给 jquery 对话框表单
【发布时间】：2013-02-25 09:52:48
【问题描述】：

我需要一个对话框窗口来弹出一个表单并将一个值传递给这个表单。我尝试了几种方法来解决这个问题，但我一直无法这样做。我已经搜遍了，似乎没有任何效果。

这是我最近的尝试：

  var message="variable";

 .click(function() {
 $( "#dialog-form" ).dialog( "open" );
 $('<input>').attr({
    type: 'text',
    id: 'hidden-input",
    value: message,
    name: 'bar'
 }).appendTo("#dialog-form");

如果我将追加内容放在对话框中，弹出窗口将停止工作（我想我不知道如何正确执行此操作）

【问题讨论】：

Also 'hidden-input" 以单引号开头并以双引号结尾。

标签： jquery forms jquery-ui-dialog

【解决方案1】：

我认为你正在寻找这样的东西：

<script>
$(function(){
   var message = "variable";

   $("#showDialog").click(function() {
      $("#hidden-input").val(message);

      $("#dialogForm").dialog("open");
   });
});
</script>

<button id="showDialog">Show Dialog</button>

<div id="dialogForm">
<input type="text" id="hidden-input" name="bar"/>
</div>

【讨论】：

【解决方案2】：

我完全使用脚本来处理对话（我认为它更干净）：

http://jsfiddle.net/fE6q2/

html:

Default firstname:<br>
<input type='text' id="default_firstname"/>
<br><br>
<button onclick='on_create_form_clicked()'>create form</button>

javascript：

function on_create_form_clicked()
{
    var html =
       "<div>" +
          "Firstname:<br>" +
          "<input type='text' class='firstname'/>" +
          "<br/><br/>" +
          "Lastname:<br>" +
          "<input type='text' class='lastname'/>" +
          "<br/><br/>" +
          "<button class='ok'>ok</button>" +    
       "</div>";

    var div = $(html);

    var default_firstname = $('#default_firstname').val();
    div.find('.firstname').val(default_firstname);        

    div.find('.ok').click(function()
    {
        div.dialog('close');

        var firstname = div.find('.firstname').val();
        var lastname = div.find('.lastname').val();

        alert("firstname was " + firstname
            + " and lastname was " + lastname);        
    });

    div.dialog(
    {
        title:"Enter firstname and lastname",
        close: destroy_this_dialog
    });
}

function destroy_this_dialog(event, ui)
{
  $(this).dialog("destroy");
  $(this).remove();
}

【讨论】：

这两种解决方案都很有效。我实际上曾尝试过 Calvin 的方法，但我一定是做错了什么，因为它以前不起作用。我需要调用一个 php 脚本来将数据输入到数据库中，因此我需要将一个 ID 传递给表单。非常感谢！
不错！然后不要忘记将 Calvins 的答案标记为解决方案。
更清洁的解决方案，它适用于我正在使用的场景。