API tools faq
paste
naufal_08

CRUD With Ajax (ADD Problems)

naufal_08
Apr 11th, 2021 (edited)
523
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 7.10 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!