title: Uncaught TypeError: $.post is not a function at addRecord (hrinfo.php:21)
body: <p>i have a modal with button that will insert records in my database i used an ajax but it gives me an error Uncaught TypeError: $.post is not a function</p>
  
  <p>heres my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="css/w3.css"&gt;
  &lt;!-- Scripts --&gt;
  &lt;script src="js/jquery-3.2.1.slim.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="js/popper.min.js"  crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!-- Scripts --&gt;
  &lt;script type="text/javascript"&gt;  
  // Add Record 
  function addRecord() {
      // get values
      var firstname = $("#firstname").val();
      var lastname = $("#lastname").val();
      var  basicsalary = $("#basicsalary").val();
  
      // Add record
      $.post("ajax/hrinfo.php", {
          firstname: firstname,
          lastname: lastname,
          basicsalary:  basicsalary
      }, function (data, status) {
          // close the popup
          $("#addnewrecordmodal").modal("hide");
  
          // read records again
          readRecords();
  
          // clear fields from the popup
          $("#firstname").val("");
          $("#lastname").val("");
          $("# basicsalary").val("");
      });
  }
  
  // READ records
  function readRecords() {
      $.get("ajax/readRecords.php", {}, function (data, status) {
          $(".records_content").html(data);
      });
  }
  &lt;/script&gt;
  &lt;style&gt;
  .topd{
      background-color: #3498DB;
      padding: 14px 16px;
     font-family: 'Pacifico', cursive;
     color : white;
     /* color: rgba(255, 255, 255, 0.6); */
  }
  .zbody{
    width: 90%;
    margin-left: 5%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="topd"&gt;
  &lt;h1&gt;Welcome to HopesV2.0&lt;/h1&gt;
  &lt;/div&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197"&gt;
    &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
      &lt;div class="navbar-nav"&gt;
      &lt;li class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          HR
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Features&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Pricing&lt;/a&gt;
              &lt;a class="nav-item nav-link" href="first.php" onclick="return confirm('Are you want to exit?')"&gt;Logout&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;BR&gt;
  &lt;!-- Start Body --&gt;
  &lt;div class="jumbotron zbody"&gt;
    &lt;h1&gt;Basic Information&lt;/h1&gt;
    &lt;hr class="my-4"&gt;
  &lt;p class="lead"&gt;
  &lt;form action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method="post"&gt;
  &lt;!-- &lt;input class="btn btn-primary" type="submit" value="NEW" name="new" /&gt; --&gt;
  
  &lt;button type="button" class="btn btn-success" data-toggle="modal" data-target="#addnewrecordmodal"&gt;New Record&lt;/button&gt;
  
  &lt;!-- Modal --&gt;
    &lt;div class="modal fade mymodal1" id="addnewrecordmodal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
  &lt;div class="modal-content"&gt;
  &lt;div class="modal-header"&gt;
  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
  &lt;h4 class="modal-title" id="myModalLabel"&gt;Employees Basic Information&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  
  &lt;div class="form-group"&gt;
  &lt;label for="first_name"&gt;First Name&lt;/label&gt;
  &lt;input type="text" id="firstname" placeholder="First Name" class="form-control" /&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
  &lt;label for="last_name"&gt;Last Name&lt;/label&gt;
  &lt;input type="text" id="lastname" placeholder="Last Name" class="form-control" /&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
  &lt;label for="salary"&gt;Basic Salary&lt;/label&gt;
  &lt;input type="text" id="basicsalary" placeholder="Basic Salary" class="form-control" /&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary" onclick="addRecord()"&gt;Add Record&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  &lt;!--End Modal Content--&gt;
  
  &lt;/form&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- End Body --&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i pretty sure i reference the jquery file correctly because my front end functions using jquery works. but this one give me some troubles. </p>