title: How to open popup form submit with Ajax when click a button?
body: <p>I have a table with data. Above the table I have an add button and when clicking that button a form will display. But what I want is to display that form in a popup window to submit when clicking the add button.</p>
  
  <p>How can I do that?</p>
  
  <p>Below I have attached my screenshot.</p>
  
  <p>My table view code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;style&gt;
  #customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  #customers td, #customers th {
      border: 1px solid #ddd;
      padding: 3px;
  }
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  #customers tr:hover {background-color: #ddd;}
  #customers th {
      padding-top: 3px;
      padding-bottom: 3px;
      text-align: left;
      background-color: #4CAF50;
      color: white;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;td&gt;&lt;input type='button' name='add' class='add_class' value='Add'/&gt;&lt;/td&gt;
  &lt;div id="created"&gt;&lt;/div&gt;
  &lt;?php
  $doc   = $display['hits']['hits'];
  $html = '&lt;table id = "customers" &gt;
          &lt;tr&gt;
             &lt;th&gt;Id&lt;/th&gt;
             &lt;th&gt;First_name&lt;/th&gt;
             &lt;th&gt;Last_name&lt;/th&gt;
             &lt;th&gt;Email&lt;/th&gt;
             &lt;th&gt;Phone&lt;/th&gt;
             &lt;th&gt;Address&lt;/th&gt;
             &lt;th&gt;Password&lt;/th&gt;
             &lt;th&gt;Status&lt;/th&gt;
             &lt;th&gt;Createddate&lt;/th&gt;
             &lt;th&gt;Updateddate&lt;/th&gt;
             &lt;th&gt;File&lt;/th&gt;
             &lt;th&gt;Edit&lt;/th&gt;
             &lt;th&gt;Delete&lt;/th&gt;
  
           &lt;/tr&gt;';
  foreach($doc as  $key =&gt; $value)
      {
          $html = $html."&lt;tr&gt;
                     &lt;td&gt;".$value['_source']['Id']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['First_name']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Last_name']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Email']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Phone']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Address']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Password']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Status']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Createddate']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['Updateddate']."&lt;/td&gt;
                     &lt;td&gt;".$value['_source']['File']."&lt;/td&gt;
                     &lt;td&gt;&lt;input type='button' name='Edit' id='Edit' value='Edit'/&gt;&lt;/td&gt;
                     &lt;td&gt;&lt;input type='button' name='Delete' id='Delete' value='Delete'/&gt;&lt;/td&gt;
  
                  &lt;/tr&gt;";
  
  
  }
  $html = $html."&lt;/table&gt;";
  
  echo $html;
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script&gt;
           $(document).ready(function(){
              $('.add_class').click(function(){
                  $("#created").toggle();
              });
           });
  &lt;/script&gt;
  
  &lt;script&gt;
        $(document).ready(function(){
                  $(".add_class").click(function(e) {
                      e.preventDefault();
                      $.ajax({
                          url  : "Crud_controller/Add",
                          data : '',
                          dataType: "HTML",
                                    success: function(response) {
                                      var result = $(response).find("body");
                                      $("#created").html(response);
                                      }
                          }).error(function() { alert("Something went wrong"); });
  
                  });
                  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My form code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;Add Employee&lt;/title&gt;
        &lt;style&gt;
           label
           {
           display:inline-block;
           width:100px;
           margin-bottom:10px;
           }
        &lt;/style&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  
        &lt;h1&gt;Add Employee&lt;/h1&gt;
        &lt;div id="add_div"&gt;
  
        &lt;form method="post" id="add_form" action="Crud_controller/add"&gt;
           &lt;label&gt;ID:&lt;/label&gt;
           &lt;input type="text" name="Id" /&gt;&lt;br/&gt;
           &lt;label&gt;First Name:&lt;/label&gt;
           &lt;input type="text" name="First_name"/&gt;&lt;br/&gt;
           &lt;label&gt;Last Name:&lt;/label&gt;
           &lt;input type="text" name="Last_name"/&gt;&lt;br/&gt;
           &lt;label&gt;Email:&lt;/label&gt;
           &lt;input type="email" name="Email"/&gt;&lt;br/&gt;
           &lt;label&gt;Phone:&lt;/label&gt;
           &lt;input type="text" name="Phone"/&gt;&lt;br/&gt;
           &lt;label&gt;Address:&lt;/label&gt;
           &lt;input type="text" name="Address"/&gt;&lt;br/&gt;
           &lt;label&gt;Password:&lt;/label&gt;
           &lt;input type="password" name="Password"/&gt;&lt;br/&gt;
           &lt;label&gt;Status:&lt;/label&gt;
           &lt;input type="text" name="Status"/&gt;&lt;br/&gt;
           &lt;label&gt;CreatedDate:&lt;/label&gt;
           &lt;input type="text" name="Createddate"/&gt;&lt;br/&gt;
           &lt;label&gt;Updateddate:&lt;/label&gt;
           &lt;input type="text" name="Updateddate"/&gt;&lt;br/&gt;&lt;br/&gt;
           &lt;label&gt;FileUpload:&lt;/label&gt;
           &lt;input name="File"  type="file" multiple="true"&gt;&lt;br/&gt;&lt;br/&gt;  
           &lt;input type="submit" name="submit" class="add" value="Insert"/&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/IHv2x.png" rel="nofollow noreferrer">enter image description here</a></p>