如何打印使用自定義對話框插入的值

我做了一個自定義的jQuery-Ui對話框。我希望對話框被調用12次，即它應該接受12個值的輸入，每個值應該打印在不同的盒子。盒子應該使用div標籤創建。如何打印使用自定義對話框插入的值

在點擊一個按鈕，對話框會彈出12次取輸入和這些12個值結束

所以應該在其內部必須使用div標籤來創建12個不同的盒子的網頁打印..

我已經能夠使自定義對話框需要12個輸入，但不能夠在2 12個不同的格框顯示其內容..

請幫助...

這裏是我的代碼..

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

來源

2013-04-26 Lucy

你是說12個不同的對話框有自己的提交按鈕，這些操作會運行一個接一個。對？ – Ranjith 2013-04-26 05:04:18

按鈕只會被點擊一次..對話框會在接受數據後依次出現12次。所有12個對話框接受完數據後纔會打印12個框。 – Lucy 2013-04-26 06:01:43

使用jquery，$('<div />'來創建新的div元素，appendTo('body')將其添加到body.i更改您的普通javascript到jquery（如獲取輸入的值）jquery是可讀，清晰和少得多的代碼..：）（因爲你已經加載了jQuery library..why不使用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++; 
     } 

    }

來源

2013-04-26 05:04:42 bipen

當我使用這段代碼時對話框只能顯示一次..我可以通過一次又一次地調用同一個對話框來輸入12次，然後在網頁上一次打印出12個不同的結果嗎？ – Lucy 2013-04-26 06:09:53

如何打印使用自定義對話框插入的值

回答

相關問題