Hướng dẫn sweetalert form submit php - biểu mẫu sweetalert gửi php

• Trang chủ
• Phát triển web
• Javascript
• Tích hợp Sweetalert 2 trong PHP & MySQL bằng Ajax

Hướng dẫn cách tích hợp Sweetalert 2 trong PHP & MySQL bằng Ajax thông qua ví dụ cụ thể

Trong các bài trước Ví dụ về PHP & MySQL AJAX Sử dụng jQuery và Edit/Update/Delete dữ liệu trong PHP & MySQL bằng Ajax các thông báo hiển thị chúng ta đều sử dụng alert để thông báo, cảnh báo. Trong hướng dẫn này, mình sẽ chỉ cho bạn cách tích hợp sweetalert 2 trong PHP & MySQL bằng Ajax. Sweet alert 2 cho phép chúng ta tùy chỉnh hộp cảnh báo trong các ứng dụng web của chúng ta và giao diện thật tuyệt vời khiến nhiều nhà phát triển yêu thích nó. Vì vậy, trong bài viết này, mình sẽ chia sẻ cách tích hợp nó dễ dàng vào các ứng dụng của chúng ta.

Tập tin index.html

Thêm các tập tin css và js của Sweetalert 2 vào trong tập tin index.html của chúng ta ở các ví dụ trước. Dưới đây là mã đầy đủ của mình:

Ví dụ

  	

  	
	
  	
	
  	
  	
  	

  

   
	


		



	    
Ví dụ về PHP & MySQL AJAX Sử dụng jQuery

	    


	    
	    

	    	

	    		
Thêm nhân viên mới

			    

			    	

					    Email
					    
				  	
				  	

					    Họ và tên
					    
				  	
				  	

					    Lương
					    
				  	
				  	

					    Địa chỉ
					    
				  	
				  	Gửi
				
	    	

	    	

	    		
Danh sách nhân viên
	    		

	    	
	    
	

	

	  	

		    


		      	
		      	

			        
Chỉnh sửa nhân viên
			        ×
		      	

		      	
		      	

		        	

		        		
				    	

						    Email
						    
					  	
					  	

						    Họ và tên
						    
					  	
					  	

						    Lương
						    
					  	
					  	

						    Địa chỉ
						    
					  	
					  	Cập nhật
					  	Đóng
					


		      	

		    
	  	
	
	
	
	
	
	
	
	
	
	
	
	
	


  

Trong đó các bạn có thể thấy tất cả các cảnh báo (alert) thành công mình đều đã thay đổi thành:

Ví dụ

Trong đó các bạn có thể thấy tất cả các cảnh báo (alert) thành công mình đều đã thay đổi thành: Thông báo cũ

Swal.fire({
				  icon: 'success',
				  title: 'Thành công.',
				  text: response
				});

alert(response);

Thông báo mớiThông báo cũ

function del() 
{
	$(document).delegate(".btn-delete-employee", "click", function() {
		Swal.fire({
			icon: 'warning',
		  	title: 'Bạn có chắc chắn muốn xóa dữ liệu nhân viên này?',
		  	showDenyButton: false,
		  	showCancelButton: true,
		  	confirmButtonText: 'Yes'
		}).then((result) => {
		  if (result.isConfirmed) {

		  	var employeeId = $(this).attr('data-id');

		  	// Ajax config
			$.ajax({
		        type: "GET", 
		        url: 'delete.php', 
		        data: {employee_id:employeeId},
		        beforeSend: function () {
		            
		        },
		        success: function (response) {
	            	all();

		            Swal.fire('Thành công.', response, 'success')
		        }
		    });

		    
		  } else if (result.isDenied) {
		    Swal.fire('Thay đổi không được lưu', '', 'info')
		  }
		});		
	});
}

function del() 
{
	$(document).delegate(".btn-delete-employee", "click", function() {

		if (confirm("Bạn có chắc chắn muốn xóa dữ liệu nhân viên này?")) {
		    var employeeId = $(this).attr('data-id'); //lấy ID nhân viên

		    // Cài đặt Ajax
			$.ajax({
		        type: "GET", 
		        url: 'delete.php',
		        data: {employee_id:employeeId}, 
		        beforeSend: function () {
		            
		        },
		        success: function (response) {
	            	all();

		            alert(response)
		        }
		    });
		}		
	});
}

Và với chắc năng xóa nhân viên thì mã js đã được thay đổi như dưới.

Với Sweetalert 2 thì các cảnh báo của bạn nhìn trong nó chuyên nghiệp và đẹp mắt hơn nhiều!

Bài viết này đã giúp ích cho bạn?