AJAX có khả năng gửi biểu mẫu mà không cần reset trang. Tôi sẽ dùng AJAX, jQuery và PHP để tạo một biểu mẫu gửi email mà không reset trang đơn giản và chi tiết.
Các bước để tạo biểu mẫu gửi mà không cần làm mới trang bằng cách sử dụng Ajax, jQuery và PHP
- Tạo một form POST bằng html
- Thêm thư viện bootstrap
- Thêm thư viện jquery
- Xác thực dữ liệu nhập vào bằng jquery và ajax
- Tạo trang gửi mail bằng php
1. Tạo một form post bằng html
Tạo file index.phpvới nội dung:
<form name="ContactForm" method="post" action=""> <div class="form-group"> <label for="name">Tên:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="message">Nội dung:</label> <textarea name="message" class="form-control" id="message"> </textarea> </div> <button type="submit" class="btn btn-default">Gửi</button> </form> <div class="message_box" style="margin:10px 0px;"> </div>
Sau biểu mẫu bằng html đơn giản, tôi thêm message_boxđể hiển thị tất cả các lỗi và để thông báo gửi mail thành công
2. Thêm thư viện bootstrap
Để nhanh chóng hơn tôi dùng thư viện bootstrap để làm đẹp form, bạn cũng có thể đổi sang thư viện khác hoặc css tùy chỉnh, chèn code này vào thẻ head
<link rel="stylesheet" href="css/bootstrap.min.css">
3. Thêm thư viện jquery
Vì tôi sử dụng jquery và ajax nên bắt buộc phải có thư viện jquery, chèn code này trong thẻ body
<script src="js/jquery.min.js"></script>
Hai file trên bạn có thể download ở cuối bài viết hoặc tự chèn vào.
4. Xác thực dữ liệu nhập vào bằng jquery và ajax
Bây giờ tôi sẽ xác thực các trường nhập vào có hợp lệ hay không. Sau đó tôi sẽ sử dụng AJAX để gửi biểu mẫu mà không cần reset trang.
$(document).ready(function() {
var delay = 2000;
$('.btn-default').click(function(e){
e.preventDefault();
var name = $('#name').val();
if(name == ''){
$('.message_box').html(
'<span style="color:red;">Bạn chưa nhập tên!</span>'
);
$('#name').focus();
return false;
}
var email = $('#email').val();
if(email == ''){
$('.message_box').html(
'<span style="color:red;">Bạn chưa nhập email!</span>'
);
$('#email').focus();
return false;
}
if( $("#email").val()!='' ){
if( !isValidEmailAddress( $("#email").val() ) ){
$('.message_box').html(
'<span style="color:red;">Email bạn nhập không đúng!</span>'
);
$('#email').focus();
return false;
}
}
var message = $('#message').val();
if(message == ''){
$('.message_box').html(
'<span style="color:red;">Bạn chưa nhập nội dung!</span>'
);
$('#message').focus();
return false;
}
$.ajax
({
type: "POST",
url: "ajax.php",
data: "name="+name+"&email="+email+"&message="+message,
beforeSend: function() {
$('.message_box').html(
'<img src="loading.gif" width="25" height="25"/>'
);
},
success: function(data)
{
setTimeout(function() {
$('.message_box').html(data);
}, delay);
}
});
});
});
//Chức năng xác minh email
function isValidEmailAddress(emailAddress) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(emailAddress);
};
5. Tạo trang gửi mail bằng php
Ở đây tôi sẽ gửi mail bằng hàm mail() có sẵn trong php, bạn có thể sử dụng phpmailer(khuyến khích). Tạo trang mới có tên ajax.phpvà dán đoạn code dưới đây.
if ( ($_POST['name']!="") && ($_POST['email']!="")){
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = "[email protected]";
$subject = "Sharescript.net";
$message = "<p>Email mới được nhận từ $name.</p>
<p>$message</p>";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "Từ: <".$email.">" . "\r\n";
$sent = mail($to,$subject,$message,$headers);
if($sent){
echo "<span style='color:green; font-weight:bold;'>
Cảm ơn bạn đã gửi email, chúng tôi sẽ liên hệ bạn sớm nhất!
</span>";
}
else{
echo "<span style='color:red; font-weight:bold;'>
Xin lỗi, gửi không thành công!
</span>";
}
}
Thay [email protected]thành email của bạn
Nếu bạn thấy hữu ích, hãy chia sẻ giúp tôi. Mọi thắc mắc xin comment bên dưới để được hỗ trợ. Chúc bạn thành công!