Multiple Dialog forms

Multiple Dialog forms

I have no idea how to do this and I would love the most simplistic way on how to do this. 

I have a slew of dialogs and on 2 of them have forms where the user needs to submit information to be stored in the database without the page refreshing. Here is my code so far

index page
  2. <?php

  4. require('classes/change-of-address.php');
  5. require('classes/insert-comment.php');
  7. if(isset($_POST['change_of_address_form'])) {
  8. //submit change of address
  9. $coa = new ChangeOfAddress();
  10. $coa->SaveToDatabase();
  11. }
  13. else if(isset($_POST['comment_form'])) {
  14. //submit comment
  15. $c = new InsertComment();
  16. $c->SaveComment();
  17. }
  18. ?>

  20. <!DOCTYPE html>
  21. <head>
  22.     <meta charset="utf-8">
  23.     <title>BOS Editor</title>
  24.     <meta name="description" content="">
  25.     <meta name="viewport" content="width=device-width, initial-scale=1">
  26.     <link rel="stylesheet" type="text/css" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
  27.     <link rel="stylesheet" type="text/css" href="css/main.css" />
  28. <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
  29. <link rel="stylesheet" type="text/css" href="css/jquery-ui.structure.min.css" />
  30. <link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css" />
  31. <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
  32. </head>
  33. <body>
  34.    

  36. <form name="main_form" method="post">
  37.    
  38. <div id="content">
  39.         <div id="header"><img src="images/Search.png" alt="" /><h1>Search</h1>
  40. </div><!-- end #header div -->
  42. <div id="search-panel">
  43. <input type="text" id="search" name="search" size="10" />
  44. <select>
  45. <option value="Parcel">Parcel</option>
  46. <option value="Owner Name">Owner Name</option>
  47. <option value="Address">Address (Mailing, Property, City, State, or Zip)</option>
  48. <option value="AccountNumber">Account Number</option>
  49. <option value="NotesField">Other (Notes Field)</option>
  50. </select>
  51. <input type="button" id="Search" name="Search" class="darkButton" value="Search" />
  52. <input type="button" id="ShowColumnChooser" name="ShowColumnChooser" class="darkButton" value="Show Column Chooser" />
  53. <input type="button" id="Export" name="Export" class="darkButton" value="Export" />
  54. </div><!-- end #search-panel div -->
  55. <div id="column-chooser">
  56. <input class="noMargin" type="checkbox" id="InCareOf" /> In Care Of <input type="checkbox" id="SiteAddress" /> Site Address <input type="checkbox" id="SiteCityStateZip" />  Site City, State, Zip <input type="checkbox" id="Address" /> Address <input type="checkbox" id="CityStateZip" /> City, State, Zip <input type="checkbox" id="ResponseCode" /> Response Code <input type="checkbox" id="InitialMailDate" /> Initial Mail Date <input type="checkbox" id="ReclassMailDate" /> Reclass Mail Date
  57. </div><!-- end #columnchooser div -->
  59. <div id="search-results">
  60. <table id="dataTable" class="display">
  61. <thead>
  62. <tr>
  63. <th>Column 1</th>
  64. <th>Column 2</th>
  65. </tr>
  66. </thead>
  67. <tbody>
  68. <tr>
  69. <td>Row 1 Data 1</td>
  70. <td>Row 1 Data 2</td>
  71. </tr>
  72. <tr>
  73. <td>Row 2 Data 1</td>
  74. <td>Row 2 Data 2</td>
  75. </tr>
  76. </tbody>
  77. </table>
  78. </div><!-- end #search-results div -->
  80. <div id="edit-panel">
  81. <h3 class="floatLeft">Editing: php echo $parcel;</h3>
  82. <input type="button" name="ViewComments" id="ViewComments" class="greyButton floatLeft" value="View Comments" />
  83. <input type="button" name="ChangeOfAddress" id="ChangeOfAddress" class="greyButton" value="Change of Address" />
  84. <p>Appeal Address Match <input type="checkbox" /></p>
  85. <table>
  86. <tr>
  87. <td style="width:200px;">Date Appeal Received</td>
  88. <td style="width:200px;">BOS Meeting Date</td>
  89. <td style="width:200px;">Late Returns Date</td>
  90. <td style="width:200px;">Determination Notice Sent Date</td>
  91. </tr>
  92. <tr>
  93. <td><input type="text" id="datepicker1" name="datepicker"></td>
  94. <td><input type="text" id="datepicker2" name="datepicker"></td>
  95. <td><input type="text" id="datepicker3" name="datepicker"></td>
  96. <td><input type="text" id="datepicker4" name="datepicker"></td>
  97. </tr>
  98. <tr>
  99. <td>Final Determination</td>
  100. <td>Analysis / Recommendation</td>
  101. <td></td>
  102. <td></td>
  103. </tr>
  104. <tr>
  105. <td><select id="FinalDetermination" name="FinalDetermination">
  106. <option value="" style="width:20px;">&nbsp;-&nbsp;Please Select&nbsp;-&nbsp;</option>
  107. <option value="None">None</option>
  108. <option value="A">A - Approve</option>
  109. <option value="D">D - Deny</option>
  110. <option value="H">H - Hold</option>
  111. </select>
  112. </td>
  113. <td><select id="AnalysisRecommendation" name="AnalysisRecommendation">
  114. <option value="" style="width:20px;">&nbsp;-&nbsp;Please Select&nbsp;-&nbsp;</option>
  115. <option value="None">None</option>
  116. <option value="3">3 - Primary</option>
  117. <option value="4.1">4.1 - Non-Primary</option>
  118. <option value="4.2">4.2 - Rental</option>
  119. </select>
  120. </td>
  121. <td></td>
  122. <td></td>
  123. </tr>
  124. </table>
  125. <div class="floatLeft"><p>Email Address</p><input type="text" id="EmailAddress" name="EmailAddress" size="40" /></div>
  126. <div class="floatLeft"><p>Phone Number</p><input type="text" id="PhoneNumber" name="PhoneNumber" size="40" /></div>
  127. <div class="clearFloat"></div>
  128. </div><!-- end #edit-panel div -->

  130. <div id="footer">
  131. <ul>
  132. <li><a href=""><?php echo $username; ?></a></li>
  133. <li><a id="Help">Help</a></li>
  134. <li><a href="">Users</a></li>
  135. </ul>
  136. </div><!-- end #smoothmenu1 div --></div><!-- end #footer div -->

  138. <div id="CommentsDialog" title="Comments">
  139. <textarea readonly style="width:100%;height:85%; margin-bottom:5px;" id="Comment" name="Comment"></textarea>
  140. <input type="text" style="width:65%;margin-top:5px;" id="InsertComment" /> <input type="submit" id="AddComment" value="Add Comment" class="floatRight" />
  141. <input type="hidden" id="comment_form" name="comment_form" />
  142. </form>
  143. </div>
  144. <div id="ChangeAddressDialog" title="Change of Address">
  145. <p><input type="checkbox" style="width: auto;" id="ChangeRequested" name="ChangeRequested" /> Change of Address Requested</p>
  146. <p>Mailing Address: <input type="text" id="Address1" name="Address1" /></p>
  147. <p>Mailing Adress 2: <input type="text" id="Address2" name="Address2" /></p>
  148. <p>City: <input type="text" id="City" name="City" /></p>
  149. <p>State: <input type="text" id="State" name="State" maxlength="2" /></p>
  150. <p>Zip Code: <input type="text" id="Zip" id="Zip" /></p>
  151. <p>Country: <input type="text" id="County" name="Country" /></p>
  152. <input type="hidden" id="change_of_address_form" name="change_of_address_form" />
  153. </div>
  154. <div id="HelpDialog" title="Help">
  155. <p><strong>How do I search for items?</strong></p>
  156. <p>To search for items, enter in some text to search fro and select the type of search you would like to perform. You can include wildcard characters in your query("*" is a wildcard character). For example, to find all parcels starting with 101, you would enter in 101*. To final all parcels starting with 101 and ending with 900, you would enter in 101-*-800*. If you do not ad a "*" to your query, one will be added automatically.</p>
  157. <p><strong>Can I sort columns in my search results?</strong></p>
  158. <p>Yes. Click on a header and it will automatically sort ascending or descending.</p>
  159. <p><strong>How do I group search results?</strong></p>
  160. <p>To group your search results, drag a column header up to the grouping bar (where it says "Drag a column header here to group by that column"). You can add multiple columns to perform a cascading drill down.</p>
  161. <p><strong>How do I edit a record?</strong></p>
  162. <p>If you have editor rights, you can edit a record by scrolling down to the filed you want to edit in the bottom form. Once you have made your changes, click out of the field or hit enter to save them to the database. All changes are automatically done for you.</p>
  163. <p><strong>Can I print the search results or the current record I am editing?</strong></p>
  164. <p>This feature is coming soon! <img src="images/smiley.png" /></p>
  165. <p><strong>Can I export the search results or the current record I am editing to a spreadsheet (or other format)?</strong></p>
  166. <p>This feature is coming soon! <img src="images/smiley.png" /></p>
  167. </div>
  168. <div id="ExportDialog" title="Export Records">
  169. <ul>
  170. <li><a href="">Export Penalty Data</a></li>
  171. <li><a href="">Export A (Approved) Records</a></li>
  172. <li><a href="">Export D (Denied) Records</a></li>
  173. <li><a href="">Export H (Hold) Records</a></li>
  174. <li><a href="">Export Analysis Records</a></li>
  175. <li><a href="">Export Late Returns Records</a></li>
  176. </ul>
  177. </div>
  178. </form>

  180. </div><!-- end #content div -->

  182.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  183. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  184. <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  185. <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
  186.     <script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
  187. <script type="text/javascript" src="js/ddsmoothmenu.js"></script>
  188. <script type="text/javascript" src="js/form-attribute-polyfill.js"></script>
  189. <script>
  190. $(document).ready(function() {
  191. $('#column-chooser').hide();
  192. $('#CommentsDialog').hide();
  193. $('#ChangeAddressDialog').hide();
  194. $('#HelpDialog').hide();
  195. $('#ExportDialog').hide();
  196. });
  197. $('#dataTable').DataTable();
  198. $( "#AddComment" )
  199. .button()
  200. .click(function( event ) {
  201. event.preventDefault();
  202. });
  203. $('#ShowColumnChooser').click(function() {
  204. //show/hide div
  205. $('#column-chooser').slideToggle('slow');
  206. });
  207. $('#Help').click(function() {
  208. //help dialog box
  209. $( "#HelpDialog" ).dialog({
  210. width: 500,
  211. modal:true,
  212. closeOnEscape:true,
  213. buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
  214.       });
  215. });
  216. $('#Export').click(function() {
  217. //export options dialog
  218. $( "#ExportDialog" ).dialog({
  219. width: 500,
  220. modal:true,
  221. closeOnEscape:true,
  222. buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
  223.       });
  224. });
  225. $('#ViewComments').click(function() {
  226. //view/add comments dialog
  227. $( "#CommentsDialog" ).dialog({
  228. height:300,
  229. width: 500,
  230. modal:true,
  231. closeOnEscape:true,
  232. buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
  233.       });
  234. $("#InsertComment").focus();
  235. });
  236. $('#ChangeOfAddress').click(function() {
  237. //change of address dialog
  238. $('#change_of_address_form').val('1');
  239. $( "#ChangeAddressDialog" ).dialog({
  240. width:500,
  241. modal:true,
  242. closeOnEscape:true,
  243. buttons: [ 
  244. { text: "Ok", type: "submit", click: function() { $(this).submit(); $(this).dialog( "close" ); } },
  245. { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
  246. });
  247. });
  248. $(function() {
  249. $('#datepicker1,#datepicker2,#datepicker3,#datepicker4').datepicker({
  250. showOn: 'both',
  251. buttonImage: 'images/calendar.png',
  252. buttonImageOnly: true,
  253. buttonText: 'Select Date'
  254. });
  255. });
  256. </script>
  257. </body>
  258. </html>

change of address php page
  2. <?php
  3. $Parcel = $_GET($Parcel);
  4. $Address1 = isset($_POST['Address1']) ? $_POST['Address1'] : null;
  5. $Address2 = isset($_POST['Address2']) ? $_POST['Address2'] : null;
  6. $City = isset($_POST['City']) ? $_POST['City'] : null;
  7. $State = isset($_POST['State']) ? $_POST['State'] : null;
  8. $Zip = isset($_POST['Zip']) ? $_POST['Zip'] : null;
  9. $Country = isset($_POST['Country']) ? $_POST['Country'] : null;

  11. class ChangeOfAddress {
  12. public $Parcel;
  13. public $Address1;
  14. public $Address2;
  15. public $City;
  16. public $State;
  17. public $Zip;
  18. public $Country;
  20. public function SaveToDatabase() {
  21. $dbc = mysqli_connect(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST) or die ('Error connecting to database.');
  22. $sql = "INSERT INTO change_of_address (parcel_id, address_1, address_2, city, state, zip, country) 
  23. values ('1','" . $Address1 . "','" . $Address2 . "','" . $City . "','" . $State . "','" . $Zip . "','" . $Country . "')";
  24. $data = mysqli_query($dbc, $sql) or die ('Error inserting information into the database.');
  25. mysqli_close($dbc);
  26. }
  27. }
  28. ?>

Thank you for your time!