title: How to print values inserted using a custom dialog box
body: <p>I have made a custom jQuery-Ui dialog box.I want the dialog box to be called 12 times i.e. it should take input of 12 values and each value should be printed in a different box.The boxes should be created using a div tag.</p>
  
  <p>So in the end on clicking a button the dialog box should pop up 12 times to take input and these 12 values should be printed on the webpage inside 12 different boxes which have to be created using div tag..</p>
  
  <p>I have been able to make the custom dialog box take 12 inputs but not being able 2 display its contents in 12 different div boxes..</p>
  
  <p>Please help...</p>
  
  <p>Here is my code..</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;jQuery UI Dialog - Default functionality
              &lt;/title &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes /smoothness/jquery-ui.css" /&gt;
              &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
              &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
              &lt;!--&lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;--&gt;
              &lt;script&gt;
                  $(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 &gt; 0 &amp;&amp; n1.length &lt;= 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 &lt;= 12) {
                          f.name.value = "";
                          $("#dialog").dialog('open');
                          cnt++;
                      }
  
                  }
  
                  function close() {
                      $("#dialog").dialog('close');
                  }
              &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;
              &lt;button type="button" id="put" onclick="click()"&gt;Insert data&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="dialog" title="Input Data"&gt;
              &lt;form id="pForm"&gt;name:
                  &lt;input type="text" name="name" width='50' maxlength="10" /&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;!--age: &lt;input type="text" name="age" /&gt;
                  &lt;br&gt;
                  &lt;br&gt;--&gt;
                  &lt;input type="button" value="OK" onclick="getPdata1()" /&gt;
                  &lt;input type="button" value="cancel" onclick="getPdata( this.value )" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>