index

<?php
//index.php
$connect = mysqli_connect("", "", "", "");
$connect->set_charset("utf8");
$query = "SELECT * FROM card_chest_level_m2m";
$result = mysqli_query($connect, $query);
 ?>
<!DOCTYPE html>
<html>
 <head>
  <title>Karten Level Hinzufügen</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
<br />
  <div class="container" style="width:700px;">
   <div class="table-responsive">
    <div align="right">
     <center><button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Level Hinzufügen</button></center>
     <br />
    </div>
    <div id="employee_table">
     <table class="table table-bordered">
      <tr>
       <th width="25%">Karte</th>
       <th width="25%">Kiste</th>
       <th width="25%">Level</th>
      </tr>
      <?php
      while($row = mysqli_fetch_array($result))
      {
      ?>
      <tr>
       <td><?php echo $row["KaID"]; ?></td>
       <td><?php echo $row["KiID"]; ?></td>
       <td><?php echo $row["LID"]; ?></td>
      </tr>
      <?php
      }
      ?>
     </table>
    </div>
   </div>
  </div>
 </body>
</html>

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Karten Level Hinzufügen</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
     <label>Karte</label>
     <select name="KaID" id="KaID" class="form-control">

        <option value="">Karte auswählen</option>
        <?php
        $query = "SELECT * FROM Card";
        $result = mysqli_query($connect, $query);

        foreach ($result as $k4s) : ?>
            <option value="<?php echo $k4s["KartenIDs"]; ?>"><?php echo $k4s["Card_Name"]; ?></option>
        <?php endforeach; ?>


     </select>
     <br />
     <label>Kiste</label>
     <select name="KiID" id="KiID" class="form-control">

        <option value="">Kiste auswählen</option>
        <?php
        $query = "SELECT * FROM Chest";
        $result = mysqli_query($connect, $query);

        foreach ($result as $ki4s) : ?>
            <option value="<?php echo $ki4s["ChestIDs"]; ?>"><?php echo $ki4s["Chest_Name"]; ?></option>
        <?php endforeach; ?>


     </select>
     <br />
     <label>Level</label>
     <input type="number" name="LID" id="LID" class="form-control" min="1" max="300" />
     <br /> <center>
     <input type="submit" name="insert" id="insert" value="Hinzufügen" class="btn btn-success" />
    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button></center>
    </form>
   </div>

  </div>
 </div>
</div>

<div id="dataModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Karten Details</h4>
   </div>
   <div class="modal-body" id="employee_detail">

   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">zurück</button>
   </div>
  </div>
 </div>
</div>

<script>
$(document).ready(function(){
 $('#insert_form').on("submit", function(event){
  event.preventDefault();
  if($('#KaID').val() == "")
  {
   alert("Karte muss ausgewählt sein");
  }
  else if($('#KiID').val() == '')
  {
   alert("Kiste muss ausgewählt sein");
  }
  else if($('#LID').val() == '')
  {
   alert("Level muss angegeben sein");
  }

  else
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:$('#insert_form').serialize(),
    beforeSend:function(){
     $('#insert').val("Hinzufügen");
    },
    success:function(data){
     $('#insert_form')[0].reset();
     $('#add_data_Modal').modal('hide');
     $('#employee_table').html(data);
    }
   });
  }
 });


 $(document).on('click', '.view_data', function(){
  //$('#dataModal').modal();
  var employee_id = $(this).attr("ID");
  $.ajax({
   url:"select.php",
   method:"POST",
   data:{employee_id:employee_id},
   success:function(data){
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
   }
  });
 });
});
 </script>