Я должен сделать вставку данных в php mysqli с jquery ajax, используя Bootstrap Модальный без refre страницы sh, вставка завершена, но у меня есть проблемы как: -
(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">×</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>
действие. 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);
}
?>
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>