Как отобразить сообщение об успехе при вставке данных в PHP Mysqli с jquery Ajax с использованием Bootstrap Модальный - PullRequest
Новая
       19

Как отобразить сообщение об успехе при вставке данных в PHP Mysqli с jquery Ajax с использованием Bootstrap Модальный

0 голосов
/ 26 апреля 2020

Я должен сделать вставку данных в php mysqli с jquery ajax, используя Bootstrap Модальный без refre страницы sh, вставка завершена, но у меня есть проблемы как: - enter image description here (1) Показывать сообщение об успехе (например, стиль fadein fadeOut) в предупреждении bootstrap после вставки данных.

index. php Страница: - 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    </head>

<body>

    <div class="row">
      <div class="col-md-12" align="right">
          <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#empInsert">ADD EMPLOYEE DETAIL</button>
      </div>    
    </div>

<!-- Insert Modal -->
<div id="empInsert" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <form id="employee_insert_form" method="post" enctype="multipart/form-data">
  <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title" align="center">INSERT EMPLOYEE DETAIL</h3>
      </div>
      <div class="modal-body">

        <div class="form-group">
            <label>Enter Employee Image</label>
            <input type="file" class="form-control" name="eimage">
        </div>

        <div class="form-group">
            <label>Enter Employee Name</label>
            <input type="text" class="form-control" name="ename" placeholder="Enter Employee Name">
        </div>

        <div class="form-group">
            <label>Enter Employee Email-Id</label>
            <input type="email" class="form-control" name="eemail" placeholder="Enter Employee Email-Id">
        </div>

        <div class="form-group">
        <label>Enter Employee Shift</label>
        <div class="radio">
          <label><input type="radio" name="eshift" value="Morning">Morning</label>
          <label><input type="radio" name="eshift" value="Evening">Evening</label>
        </div>
        </div>

        <div class="form-group">
        <label>Enter Employee Designation</label>
        <select class="form-control" name="edesignation">
            <option>===Please Select Employee Designation Here====</option>
            <option value="ASSISTANT">ASSISTANT</option>
            <option value="EXECUTIVE">EXECUTIVE</option>
            <option value="MANAGER">MANAGER</option>
            <option value="SUPERVISOR">SUPERVISOR</option>
        </select>
        </div>

        <div class="form-group">
        <label>Enter Employee Qualification</label>
        <div class="checkbox">
          <label><input type="checkbox" name="equalification[]" value="10th">10th</label>
          <label><input type="checkbox" name="equalification[]" value="12th">12th</label>
          <label><input type="checkbox" name="equalification[]" value="Diploma">Diploma</label>
          <label><input type="checkbox" name="equalification[]" value="Graduate">Graduate</label>
        </div>
        </div>
    </div>
      <div class="modal-footer">
        <button type="button" onclick="addData()" class="btn btn-primary">SAVE</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
    </form> 

  </div>
</div>

       <div class="row">
      <div class="col-md-12">
        <h2>All Records</h2>
            <div  id="all_table_data">

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

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    </body>
</html>

JS Код здесь: - 

<script>
function addData() {
     var formData = new FormData($('#employee_insert_form')[0]);
    formData.append('action', 'add');
    $.ajax({
        method: 'post',
        url: 'action.php',
        data: formData,
        processData: false,
        contentType: false,
        cache: false,
        success: function (response) {
            $("#all_table_data").html(response);
            $('#employee_insert_form')[0].reset();
            $('#empInsert').modal('hide');
        }
    });
}

</script>

действие. php код здесь: - 

<?php
include('dbconn.php');

if(isset($_POST["action"]) && $_POST["action"]=="add"){
            $a = $_FILES["eimage"]["name"];
        $a_tmp = $_FILES['eimage']['tmp_name'];
        $newFilePath="upload/".$a;
        move_uploaded_file($a_tmp, $newFilePath);

        $b = $_POST["ename"];
         $c = $_POST["eemail"];
         $d = $_POST["eshift"];
         $e = $_POST["edesignation"];
         $f_array = $_POST["equalification"];
        $f_string = implode(',', $f_array);

$sql = "INSERT INTO `tbl_employee`(`employee_image`, `employee_name`, `employee_email`, `employee_shift`, `employee_designation`, `employee_qualification`) VALUES ('$a','$b','$c','$d','$e','$f_string')";

    $run = mysqli_query($conn, $sql);
}
?>
...