title: How to put this form in to a dialog?
body: <p><strong>Background:</strong></p>
  
  <p>This page is a form that has a table to select permisson for different users (Read only,editable)
  For each selectbox ,the name is the id of users.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>1)How can it put in a dialog <strong>using jquery</strong>?
   as i googled found that the pop up box is not a new page as usual , but only a form in <code>&lt;div&gt;</code> element , I need to use datatable in this case so i can not simply do this.</p>
  
  <p>2) How to retrieve the value after the pop up box closed?
  For each selectbox ,the name is the id of users, i would like to get the userid  and the permission setting for each users.</p>
  
  <p>Thank you for kindly help</p>
  
  <p><strong>This is the add.php (upper level form)</strong></p>
  
  <pre><code>&lt;?
  include("../connection/conn.php");
  session_start();
  
  if($_SERVER['REQUEST_METHOD'] == "POST"){
  
  if (!isset($_POST['subscribe']))
  $_POST['subscribe']=0;
  if (!isset($_POST['unsubscribe']))
  $_POST['unsubscribe']=0;
  
  $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  
  try {
  
      $listName = $_POST['lname'];
      $listFromName = $_POST['fname'];
      $listReplyTo = $_POST['remail'];
      $listSubject = $_POST['sub'];
      $listRemindSub = $_POST['subscribe'];
      $listRemindUnSub = $_POST['unsubscribe'];
      $listReminder = $_POST['creminder'];
  
      $query="INSERT INTO list (ListID,ListName,FromName,ReplyTo,Subject,IsRemindSub,IsRemindUnSub,CreateDate,Reminder) VALUES ('',?,?,?,?,?,?,CURDATE(),?)";
      $stmt = $conn-&gt;prepare($query);
  
  
      $stmt-&gt;bindParam(1, $listName , PDO::PARAM_STR);
      $stmt-&gt;bindParam(2, $listFromName, PDO::PARAM_STR);
      $stmt-&gt;bindParam(3, $listReplyTo, PDO::PARAM_STR);
      $stmt-&gt;bindParam(4, $listSubject, PDO::PARAM_STR);
      $stmt-&gt;bindParam(5, $listRemindSub, PDO::PARAM_INT);
      $stmt-&gt;bindParam(6, $listRemindUnSub, PDO::PARAM_INT);
      $stmt-&gt;bindParam(7, $listReminder, PDO::PARAM_STR);
  
      $stmt-&gt;execute();
  
  
  }
  catch(PDOException $e)
      {
      die ($e-&gt;getMessage().'&lt;a href="add.php"&gt; Back&lt;/a&gt;'); 
      $conn-&gt;rollBack();
      }
  
  
  try {
      $lastID=$conn-&gt;lastInsertId();
      $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'Email','{email}')";
      $stmt = $conn-&gt;prepare($query);
      $stmt-&gt;execute();
      $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'FirstName','{fname}')";
      $stmt = $conn-&gt;prepare($query);
      $stmt-&gt;execute();
      $query="INSERT INTO require_attributes (ReqID,ListID,Attribute,Tag) VALUES ('',$lastID,'LastName','{lname}')";
      $stmt = $conn-&gt;prepare($query);
      $stmt-&gt;execute();
  }
  catch(PDOException $e)
      {
      die ($e-&gt;getMessage().'&lt;a href="add.php"&gt; Back&lt;/a&gt;'); 
      $conn-&gt;rollBack();
      } 
  
  try {
      $userID = $_SESSION['username'];
      $query="INSERT INTO user_list (UserID,ListID,UserListRights) VALUES (?,$lastID,'Edit')";
      $stmt = $conn-&gt;prepare($query);
      $stmt-&gt;bindParam(1, $userID, PDO::PARAM_STR);
  
      $stmt-&gt;execute();
  
  }
  catch(PDOException $e)
      {
      die ($e-&gt;getMessage().'&lt;a href="add.php"&gt; Back&lt;/a&gt;'); 
      $conn-&gt;rollBack();
      }    
  
  
  $conn = null;
  
  ?&gt;
  &lt;div id="stylized" class="myform"&gt;
  &lt;div style="text-align:center;font-weight:bold;"&gt;You have created a list. By default Mail Address, First Name , Last Name is in your list. Add more field if you want. &lt;a href='add.php'&gt;Back&lt;/a&gt;&lt;/div&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;?
  }else{?&gt;
  
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  &lt;script src="../plugin/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="../plugin/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="../plugin/jquery.form.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="../style/form.css" /&gt;
  &lt;script&gt;
  function loadDialogBox() {'
      $("#myEmptyDiv").load("popup.php", function() {
  
        $("#myEmptyDiv").dialog({
           title: "Permission Setting",
           autoOpen: false,
           buttons: { "Submit" : submitDialogForm() }
        });
        $("#myEmptyDiv").dialog("open");
      });
  }
  
  $(function() { $("#openDialog").on('click', loadDialogBox); });
  
  $(document).ready(function(){
  $("#addlist").validate();
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="stylized" class="myform"&gt;
  &lt;form id="addlist" method="post" action="add.php" &gt;
  &lt;h1&gt;Create your new subscriber list&lt;/h1&gt; 
  &lt;p&gt;Create a new list before adding subscriber &lt;label class="right"&gt;&lt;em class="dot"&gt;*&lt;/em&gt; indicates required&lt;/label&gt;&lt;/p&gt;
  
  &lt;label&gt;&lt;em class="dot"&gt;*&lt;/em&gt; List name:
  &lt;span class="small"&gt;Add your list name&lt;/span&gt;
  &lt;/label&gt;
  &lt;input id="lname" name="lname" class="required" /&gt;
  
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;label&gt;Reminder:
  &lt;span class="small"&gt;Remind the details of your list&lt;/span&gt;
  &lt;/label&gt;
  &lt;textarea id="creminder" name="creminder" cols="52" &gt;&lt;/textarea&gt;
  
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;p&gt;Permission Setting ...&lt;/p&gt;
  
  &lt;a id="openDialog" href="#"&gt;Permission Settings&lt;/a&gt;
  &lt;label&gt;Or open to other users&lt;/label&gt; &lt;input type="checkbox" class="checkbox" name="public" value="1"&gt;
  
  
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;p&gt;Email me when ...&lt;/p&gt; 
  &lt;label&gt;People subscribe&lt;/label&gt; &lt;input type="checkbox" class="checkbox" name="subscribe" value="1"&gt;
  &lt;label&gt;People unsubscribe&lt;/label&gt; &lt;input type="checkbox" class="checkbox" name="unsubscribe" value="1"&gt;
  
  
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;input class="submit" type="submit" name="submit" value="Submit"/&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  
  &lt;/form&gt;
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id="stylized" class="myform"&gt;
  &lt;?
  try{
  $sql = '
      SELECT   *
      FROM     list,user_list
      WHERE    user_list.UserID=?
      AND list.ListID=user_list.ListID
  ';
  $stmt = $conn-&gt;prepare($sql);
  $stmt-&gt;execute(array($_SESSION['username']));
  $result= $stmt-&gt;fetchAll();
  $num_rows= $stmt-&gt;rowCount();
  }
  catch(PDOException $e)
      {
      die ($e-&gt;getMessage().'&lt;a href="add.php"&gt; Back&lt;/a&gt;'); 
      }
  $conn = null;
  if ($num_rows == 0) {
      echo '&lt;div style="text-align:center;font-weight:bold;"&gt;You have not created any list yet.&lt;/div&gt;';}
  else {
      echo '&lt;h1&gt;Your Subscriber List&lt;/h1&gt; &lt;p&gt;You have created '.$num_rows.' list(s).&lt;/p&gt;';
  foreach ($result as $set) 
  {
  echo '&lt;div style="font-weight:bold;"&gt;List Name : '.$set['FromName'].'&lt;/div&gt;&lt;br&gt;';
  echo '&lt;div style="font-weight:bold;"&gt;Subscriber : &lt;/div&gt;&lt;br&gt;';
  echo '&lt;div style="font-weight:bold;"&gt;Create Date : '.$set['CreateDate'].'&lt;/div&gt;&lt;br&gt;';
  echo '&lt;hr&gt;';
  }}
      ?&gt;
  
  &lt;div class="spacer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;?
  }
  ?&gt;
  </code></pre>
  
  <p><strong>This is the popup.php</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;style type="text/css"&gt;
        @import "../plugin/datatable/media/css/demo_page.css";
        @import "../plugin/datatable/media/css/demo_table.css";
      &lt;/style&gt;
      &lt;script type="text/javascript" src="../plugin/datatable/media/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../plugin/datatable/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
      function submitDialogForm() {
    $.post("add.php", $("#myEmptyDiv form").serialize(), function(data) {
       $("#yourUserIdDisplay").val(data.userId);
    });
  }
      $(document).ready(function() {
      $('#viewSub').dataTable();
      } );
      &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;?
  include("../connection/conn.php");
  session_start();
  $sql =
      "SELECT  UserID,Name,Rights,Position
      FROM     user
      WHERE UserID != ?
      AND Rights != 'Admin'
      ";
  $stmt = $conn-&gt;prepare($sql);
  $stmt-&gt;execute(array($_SESSION['username']));
  $num_rows= $stmt-&gt;rowCount();
  if ($num_rows == 0)
  echo "There is no another user in this system";
  else{
  $result = $stmt-&gt;fetchAll();
  ?&gt;
  &lt;form&gt;
  &lt;table width="100%" class="display" id="viewSub"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th field="col1" width="40%"&gt;Name:&lt;/th&gt;
  &lt;th field="col2" width="40%"&gt;Position:&lt;/th&gt;
  &lt;th field="col2" width="20%"&gt;Permission:&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;?
  foreach ($result as $set) 
  {
      echo "&lt;tr&gt;&lt;td&gt;".$set['Name']."&lt;/td&gt;&lt;td&gt;".$set['Position']."&lt;/td&gt;&lt;td&gt;&lt;select name=".$set['UserID']."&gt;&lt;option value='default'&gt;Not Share&lt;/option&gt;&lt;option value='Read'&gt;Read Only&lt;/option&gt;&lt;option value='Edit'&gt;Editable&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;";
  }
  ?&gt;
  &lt;/tbody&gt; 
  &lt;/table&gt;
  &lt;div style='text-align:center'&gt; &lt;button id='save'&gt;Confirm&lt;/button&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;?
  }
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>