title: I am trying to retrieve data from a database using ajax and populate in form that is in a bootstrap modal
body: <p>I need a help here when I click on the edit button on the image below i expect to see data populated on a form in a bootstrap modal window I am using jquery ajax method to populate the data in the form of
  <a href="https://i.stack.imgur.com/jokam.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jokam.png" alt="My home page"></a></p>
  
  <p>and the edit modal image
  <a href="https://i.stack.imgur.com/LXGo0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LXGo0.png" alt="enter image description here"></a></p>
  
  <p>Here is code for the home page</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;?php require_once("connect.php"); ?&gt;
   &lt;?php require_once("fetch.php"); ?&gt;
   &lt;?php require_once("select.php"); ?&gt;
   &lt;?php require_once("process.php"); ?&gt;
   &lt;!DOCTYPE html&gt;
   &lt;html lang="en"&gt;
     &lt;head&gt;
       &lt;meta charset="utf-8"&gt;
       &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       &lt;title&gt;Home&lt;/title&gt;
       &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
       &lt;link rel="stylesheet" href="css/style.css"&gt;
    
       &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
       &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
       &lt;!--[if lt IE 9]&gt;
         &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
         &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
       &lt;![endif]--&gt;
     &lt;/head&gt;
     &lt;body&gt;
      &lt;div class="container"&gt;
       &lt;div class="row"&gt;
        &lt;div class="col-sm-8 col-sm-offset-2"&gt;
         &lt;ul class="nav nav-pills"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
         &lt;button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal"&gt;Add&lt;/button&gt;
         &lt;table class="table" id="table"&gt;
          &lt;tr&gt;
           &lt;th&gt;S/N&lt;/th&gt;
           &lt;th&gt;Name&lt;/th&gt;
           &lt;th&gt;Email&lt;/th&gt;
           &lt;th&gt;Description&lt;/th&gt;
           &lt;th&gt;Edit&lt;/th&gt;
           &lt;th&gt;View&lt;/th&gt;
           &lt;th&gt;Delete&lt;/th&gt;
          &lt;/tr&gt;
          &lt;?php
           $query = "SELECT * FROM contact";
           $runQuery = mysqli_query($connect, $query);
           if(!$runQuery){
            die("Could not run select query ".mysqli_error($connect));
           }
           $sn = 1;
           while($row = mysqli_fetch_assoc($runQuery)){  ?&gt; 
        &lt;tr&gt;
         &lt;td&gt;&lt;?php echo $sn++  ?&gt;&lt;/td&gt;
         &lt;td&gt;&lt;?php echo $row["name"]  ?&gt;&lt;/td&gt;
         &lt;td&gt;&lt;?php echo $row["email"]  ?&gt;&lt;/td&gt;
         &lt;td&gt;&lt;?php echo $row["description"]  ?&gt;&lt;/td&gt;
         &lt;td&gt;
          &lt;button type="button" data-toggle="modal" data-target="#myModal"  class="btn btn-warning btn-sm edit-data" id="&lt;?php echo $row['userid']  ?&gt;"&gt;Edit&lt;/button&gt;
         &lt;/td&gt;
         &lt;td&gt;
          &lt;button type="button" data-target="#viewModal" data-toggle="modal" class="btn btn-primary btn-sm view-data" id="&lt;?php echo $row['userid']  ?&gt;"&gt;View&lt;/button&gt;
         &lt;/td&gt;
         &lt;td&gt;
          &lt;button type="button" class="btn btn-danger btn-sm del-data" id="&lt;?php echo $row['userid']  ?&gt;"&gt;Danger&lt;/button&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
          &lt;?php } ?&gt;
         &lt;/table&gt;
         &lt;!-- Modal --&gt;
         &lt;div id="myModal" class="modal fade" role="dialog"&gt;
           &lt;div class="modal-dialog"&gt;
  
             &lt;!-- Modal content--&gt;
             &lt;div class="modal-content"&gt;
               &lt;div class="modal-header"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                 &lt;h4 class="modal-title"&gt;Add Data&lt;/h4&gt;
               &lt;/div&gt;
               &lt;div class="modal-body"&gt;
                &lt;div id="success" class="alert alert-success"&gt;&lt;/div&gt;
                 &lt;form class="form" method="POST" id="insertData"&gt;
                  &lt;div id="nameError" class="alert alert-danger"&gt;&lt;/div&gt;
                  &lt;div class="form-group"&gt;
                   &lt;label&gt;Name&lt;/label&gt;
                   &lt;input type="text" class="form-control" name="name" id="name"&gt;
                  &lt;/div&gt;
                  &lt;div id="emailError" class="alert alert-danger"&gt;&lt;/div&gt;
                  &lt;div class="form-group"&gt;
                   &lt;label&gt;Email&lt;/label&gt;
                   &lt;input type="text" class="form-control" name="email" id="email"&gt;
                  &lt;/div&gt;
                  &lt;input type="hidden" name="userid" id="contactUserId"&gt;
                  &lt;div id="descriptionError" class="alert alert-danger"&gt;&lt;/div&gt;
                  &lt;div class="form-group"&gt;
                   &lt;label&gt;Description&lt;/label&gt;
                   &lt;textarea name="description" id="description" class="form-control"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;       
                  &lt;input type="submit" class="btn btn-primary" value="Add" name="add" id="add"&gt;
                 &lt;/form&gt;
               &lt;/div&gt;
               &lt;div class="modal-footer"&gt;
                 &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
               &lt;/div&gt;
             &lt;/div&gt;
  
           &lt;/div&gt;
         &lt;/div&gt;
         &lt;div id="viewModal" class="modal fade" role="dialog"&gt;
           &lt;div class="modal-dialog"&gt;
  
             &lt;!-- Modal content--&gt;
             &lt;div class="modal-content"&gt;
               &lt;div class="modal-header"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                 &lt;h4 class="modal-title"&gt;View Data&lt;/h4&gt;
               &lt;/div&gt;
               &lt;div class="modal-body" id="contactDetail"&gt;
               &lt;/div&gt;
               &lt;div class="modal-footer"&gt;
                 &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
               &lt;/div&gt;
             &lt;/div&gt;
  
           &lt;/div&gt;
         &lt;/div&gt;
         
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      
       
  
       &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
       &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
       &lt;script src="js/myscript.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code is for entering  and updating data in the database process.php</p>
  
  <pre><code>&lt;?php 
  if(!empty($_POST)){
  
      $name = $_POST["name"];
      $email = $_POST["email"];
      $description = $_POST["description"];
      $userid = $_POST["userid"];
  
      if($userid != ''){
          $query = "UPDATE contact SET name = '$name', email='$email', description='$description' WHERE userid = $userid ";
          $runQuery = mysqli_query($connect, $query);
          if(!$runQuery){
              die("Could not run query ".mysqli_error($connect));
          }
      }else{
          $query = "INSERT INTO contact(name, email, description) VALUES ";
          $query .=" ('$name', '$email', '$description')";
          $runQuery = mysqli_query($connect, $query);
          if(!$runQuery){
              die("Could not run insert query ".mysqli_error($connect));
          }
      }
  }
  </code></pre>
  
  <p>This code retrieves data from database</p>
  
  <pre><code>&lt;?php 
  if(isset($_POST['userid'])){
      $editId = (int)$_POST['userid'];
      $query = "SELECT * FROM contact WHERE userid = $editId";
      $runQuery = mysqli_query($connect, $query);
      if(!$runQuery){
          die("Could not run query ".mysqli_error($connect));
      }
      $getData = mysqli_fetch_assoc($runQuery);
      echo json_encode($getData);
  
  }
  </code></pre>
  
  <p>This is my js file</p>
  
  <pre><code>$(document).ready(function(){
  
  $("#insertData").submit(function(event){
      event.preventDefault();
      if($("#name").val() == ""){
          $("#nameError").css("display", "block").html("Name is required");
      }else if ($("#email").val() == "") {
          $("#emailError").css("display", "block").html("Email is required");
      }else if ($("#description").val() == "") {
          $("#descriptionError").css("display", "block").html("Description is required");
      }else{
          $.ajax({
              url: "index.php",
              method: "POST",
              data: $("#insertData").serialize(),
              success: function(data){
                  $("#success").css("display", "block").html("Data added");
                  $("#insertData")[0].reset();
              }
          });
      }
  
  });
  
  $(document).on("click", ".edit-data", function(){
      var contactId = $(this).attr("id");
      $.ajax({
          url:"index.php",
          method: "POST",
          data: {contactId:contactId},
          dataType: "json",
          success: function(data){
              $("#name").val(data.name);
              $("#email").val(data.email);
              $("#description").val(data.description);
              $("#contactUserId").val(data.userid);
              $("#add").val("Update");
              $("#myModal").modal("show");
  
          }
  
      });
  
  });
  
  $(document).on('click', '.view-data', function(){  
            var contactId = $(this).attr("id");  
            if(contactId != '')  
            {  
                 $.ajax({  
                      url:"index.php",  
                      method:"POST",  
                      data:{contactId:contactId},  
                      success:function(data){  
                           $('#contactDetail').html(data);  
                           $('#viewModal').modal('show');  
                      }  
                 });  
            }            
       });  
  </code></pre>
  
  <p>});</p>