如何打印使用自定义对话框插入的值答案

【问题标题】：How to print values inserted using a custom dialog box如何打印使用自定义对话框插入的值
【发布时间】：2016-02-02 06:32:12
【问题描述】：

我制作了一个自定义的 jQuery-Ui 对话框。我希望该对话框被调用 12 次，即它应该输入 12 个值，并且每个值应该打印在不同的框中。应该使用div 标签。

所以最后点击一个按钮，对话框应该弹出 12 次接受输入，这 12 个值应该打印在网页上的 12 个不同的框内，这些框必须使用 div 标签创建..

我已经能够使自定义对话框接受 12 个输入，但不能在 12 个不同的 div 框中显示 2 个内容..

请帮忙...

这是我的代码..

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Default functionality
            </title <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes /smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
            <!--<link rel="stylesheet" href="/resources/demos/style.css" />-->
            <script>
                $(document).ready(function() {
                    $('#dialog').dialog({
                        autoOpen: false,
                        width: 250,
                        height: 180,
                        modal: true,
                        show: "slow"
                    });
                    $('#put').click(function() {
                        $("#dialog").dialog("open");
                    });

                });


                function getPdata(arg) {
                    var f = document.getElementById('pForm');

                    close();
                    return;
                }
                var cnt = 1;

                function getPdata1() {
                    var f = document.getElementById('pForm');
                    var n = f.name.value;
                    var n1 = f.name.value.toString();
                    //var a = parseInt( f.age.value );                          
                    alert(n1.length);
                    if (n1.length > 0 && n1.length <= 10) {

                        //alert( 'name: ' + n + '\n age: ' + a );
                        alert('name : ' + n);
                    } else {
                        alert('the data you have enterd is not in limit.Please try again');
                        return;

                    }
                    close();
                    if (cnt <= 12) {
                        f.name.value = "";
                        $("#dialog").dialog('open');
                        cnt++;
                    }

                }

                function close() {
                    $("#dialog").dialog('close');
                }
            </script>
    </head>

    <body>
        <div>
            <button type="button" id="put" onclick="click()">Insert data</button>
        </div>
        <div id="dialog" title="Input Data">
            <form id="pForm">name:
                <input type="text" name="name" width='50' maxlength="10" />
                <br>
                <br>
                <!--age: <input type="text" name="age" />
                <br>
                <br>-->
                <input type="button" value="OK" onclick="getPdata1()" />
                <input type="button" value="cancel" onclick="getPdata( this.value )" />
            </form>
        </div>
    </body>

</html>

【问题讨论】：

你的意思是12个不同的对话框都有自己的提交按钮，这些动作一个一个运行。对吗？
按钮只会被点击一次..对话框会在接受数据后一个接一个出现12次。12个对话框都接受数据后才会打印12个对话框..跨度>

标签： javascript jquery html jquery-ui jquery-ui-dialog

【解决方案1】：

使用 jquery，$('<div />' 创建新的 div 元素，appendTo('body') 将其添加到正文中..我也将您的普通 javascript 更改为 jquery（例如获取输入值） jquery 可读、清晰且少得多代码.. :) （既然您已经加载了 jquery 库..为什么不使用 jquery..）

试试这个

 function getPdata1() {
      var n = $("input[name='name']").val();

      alert(n.length);
      if (n.length > 0 && n.length <= 10) {
           $('<div />',{id:"div" + cnt }).html(n).appendTo('body');  //crated div will have an id as `div`+ count;
      } else {
            alert('the data you have enterd is not in limit.Please try again');
             return;

      }
        close();
        if (cnt <= 12) {
             f.name.value = "";
              $("#dialog").dialog('open');
              cnt++;
        }

    }

【讨论】：

当我使用这段代码时，对话框只显示一次..我怎样才能通过一次又一次地调用同一个对话框来输入 12 次，然后打印 12 个不同的结果一下子在网页上？？？