Question

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

因此，最后单击一个按钮时，对话框应弹出12次以进行输入，这12个值应打印在12个不同的框内的网页上，这些框必须使用div标签创建。

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

请帮忙......

这是我的代码..

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

Answer 1

使用jquery，$('<div />'创建新的div元素，appendTo('body')将其添加到body ..i将你的普通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++;
        }

    }

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

1 个答案: