naufal_08

CRUD With Ajax (ADD Problems)

Apr 11th, 2021 (edited)
131
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2.     include 'auth.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta name="csrf-token" content="<?php $_SESSION['csrf-token']; ?>">
  8.     <!-- Bootstrap -->
  9.     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
  10.     <!-- Font Awesome -->
  11.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  12.     <!-- Datatable -->
  13.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  14.     <title>CRUD Ajax</title>
  15. </head>
  16. <body>
  17.     <nav class="navbar navbar-dark bg-primary">
  18.         <a href="index.php" style="color: #fff;" class="navbar-brand">CRUD Ajax</a>
  19.     </nav>
  20.  
  21.     <div class="container">
  22.         <h2 align="center" style="margin: 30px;">CRUD Ajax No Loading</h2>
  23.  
  24.         <form class="form-data" id="form-data" method="post">
  25.             <div class="row">
  26.                 <div class="col-sm-3">
  27.                     <div class="form-group">
  28.                         <label>Nama Mahasiswa</label>
  29.                         <input type="text" name="nama_mahasiswa" id="nama_mahasiswa" class="form-control" required="true">
  30.                         <p class="text-danger" id="err_nama_mahasiswa"></p>
  31.                     </div>
  32.                 </div>
  33.                 <div class="col-sm-3">
  34.                     <div class="form-group">
  35.                         <label>Jurusan</label>
  36.                         <select name="jurusan" id="jurusan" class="form-control" required="ture">
  37.                             <option value=""></option>
  38.                             <option value="Sistem Informasi">Sistem Informasi</option>
  39.                             <option value="Teknik Informatika">Teknik Informatika</option>
  40.                         </select>
  41.                         <p class="text-danger" id="err_jurusan"></p>
  42.                     </div>
  43.                 </div>
  44.                 <div class="col-sm-3">
  45.                     <div class="form-group">
  46.                         <label>Tanggal Masuk</label>
  47.                         <input type="date" name="tanggal_masuk" id="tanggal_masuk" class="form-control" required="true">
  48.                         <p class="text-danger" id="err_tanggal_masuk"></p>
  49.                     </div>
  50.                 </div>
  51.                 <div class="col-sm-3">
  52.                     <div class="form-group">
  53.                         <label>Jenis Kelamin</label><br>
  54.                         <input type="radio" name="jenkel" id="jenkel1" value="Laki-laki" required="true"> Laki-laki
  55.                         <input type="radio" name="jenkel" id="jenkel2" value="Perempuan" required="true"> Perempuan
  56.                     </div>
  57.                     <p class="text-danger" id="err_jenkel"></p>
  58.                 </div>
  59.             </div>
  60.            
  61.             <div class="form-group">
  62.                 <label>Alamat</label>
  63.                 <textarea name="alamat" id="alamat" class="form-control" required="true"></textarea>
  64.                 <p class="text-danger" id="err_alamat"></p>
  65.             </div>
  66.  
  67.             <div class="form_group">
  68.                 <button type="button" name="simpan" id="simpan" class="btn btn-primary">
  69.                     <i class="fa fa-save"></i> Simpan
  70.                 </button>
  71.             </div>
  72.         </form>
  73.         <hr>
  74.  
  75.         <div class="data"></div>
  76.     </div>
  77.  
  78.     <div class="text-center">
  79.         © <?php echo date('Y'); ?> Copyright: ANF
  80.     </div>
  81.  
  82.     <!-- JQuery -->
  83.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  84.     <!-- DataTable -->
  85.     <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  86.     <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  87.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  88.     <script>
  89.         $(document).ready(function(){
  90.             //Mengirimkan Token Keamanan
  91.             $.ajaxSetup({
  92.                 headers : {
  93.                 'Csrf-Token': $('meta[name="csrf-token"]').attr('content')
  94.                 }
  95.             });
  96.  
  97.             $('.data').load("data.php");
  98.  
  99.             $("#simpan").click(function(){
  100.                 var data = $('.form-data').serialize();
  101.                 var jenkel1 = document.getElementById("jenkel1").value;
  102.                 var jenkel2 = document.getElementById("jenkel2").value;
  103.                 var nama_mahasiswa = document.getElementById("nama_mahasiswa").value;
  104.                 var tanggal_masuk = document.getElementById("tanggal_masuk").value;
  105.                 var alamat = document.getElementById("alamat").value;
  106.                 var jurusan = document.getElementById("jurusan").value;
  107.        
  108.                 if (nama_mahasiswa=="") {
  109.                     document.getElementById("err_nama_mahasiswa").innerHTML = "Nama Mahasiswa Harus Diisi";
  110.                 } else {
  111.                     document.getElementById("err_nama_mahasiswa").innerHTML = "";
  112.                 }
  113.                 if (alamat=="") {
  114.                     document.getElementById("err_alamat").innerHTML = "Alamat Mahasiswa Harus Diisi";
  115.                 } else {
  116.                     document.getElementById("err_alamat").innerHTML = "";
  117.                 }
  118.                 if (jurusan=="") {
  119.                     document.getElementById("err_jurusan").innerHTML = "Jurusan Mahasiswa Harus Diisi";
  120.                 } else {
  121.                     document.getElementById("err_jurusan").innerHTML = "";
  122.                 }
  123.                 if (tanggal_masuk=="") {
  124.                     document.getElementById("err_tanggal_masuk").innerHTML = "Tanggal Masuk Harus Diisi";
  125.                 } else {
  126.                     document.getElementById("err_tanggal_masuk").innerHTML = "";
  127.                 }
  128.                 if(document.getElementById("jenkel1").checked == false && document.getElementById("jenkel2").checked == false){
  129.                     document.getElementById("err_jenkel").innerHTML = "Jenis Kelamin Harus Dipilih";
  130.                 } else {
  131.                     document.getElementById("err_jenkel").innerHTML = "";
  132.                 }
  133.  
  134.                 if(nama_mahasiswa != "" && tanggal_masuk != "" && alamat != "" && jurusan != "" && (document.getElementById("jenkel1").checked==true || document.getElementById("jenkel2").checked==true)){
  135.                     $.ajax({
  136.                         type: 'POST',
  137.                         url: "form_action.php",
  138.                         data: data,
  139.                         success: function(){
  140.                             $('.data').load("data.php");
  141.                             document.getElementById("id").value = "";
  142.                             document.getElementById("form-data").reset();
  143.                         }, error: function(response){
  144.                             console.log(response.responseText);
  145.                         }
  146.                     });
  147.                 }
  148.             });
  149.         });
  150.     </script>
  151. </body>
  152. </html>
RAW Paste Data