Bài viết sau sẽ hướng dẫn các bạn làm một trang có form submit không cần load lại trang cũng không cần phải gửi dữ liệu qua ajax.
Ảnh tham khảo kết quả sau khi thực hành xong bài này:
I. HTML
Trước tiên là thiết kế một trang html để làm form gửi dữ liệu cái đã. Đây là một form đơn giản gồm 3 thẻ input, 1 trường textarea. Chú ý form này sẽ có action là tập tin submit.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="preview"> </div> <div id="formbox"> <form id="form" action="submit.php" method="post"> Name <input type="text" name="name" /> Email <input type="text" name="email" /> Message <textarea name="message"></textarea> <input type="submit" value="Submit"> </form> </div> |
II. Javascript
Sau đó chúng ta add thư viện jQuery vào nhé
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript"> $('document').ready(function() { $('#form').ajaxForm( { target: '#preview', success: function() { $('#formbox').slideUp('fast'); } }); }); </script> |
Hàm $(‘#form’).ajaxForm() có id là id của thẻ FORM, hàm này thực hiện post dữ liệu tới file submit.php mà không cần refresh trình duyệt, nếu thành công thì cho phép hiển thị #preview.
Ngoài ra chúng ta cũng cần làm một vài đoạn mã jQuery để thực hiện validate dữ liệu xem chính xác chưa
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> $('document').ready(function() { $('#form').validate( { rules: { "name":{ required:true, maxlength:40 }, "email":{ required:true, email:true, maxlength:100 }, "message":{ required:true }}, messages: { "name":{ required:"This field is required" }, "email":{ required:"This field is required", email:"Please enter a valid email address" }, "message":{ required:"This field is required" }}, submitHandler: function(form){ $(form).ajaxSubmit({ target: '#preview', success: function() { $('#formbox').slideUp('fast'); } }); } }) }); </script> |
III. Database
Xong về mặt giao diện, tiến tới thiết kế database để nó nhận dữ liệu vào chứ nhỉ. Nào làm một cái database đơn giản.
|
1 2 3 4 5 6 7 |
CREATE TABLE `contact` ( `id` int(11) AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) UNIQUE KEY, `email` varchar(100), `message` text UNIQUE KEY, `created_date` int(11), ) |
Và thủ tục kết nối tới database trong file db.php
|
1 2 3 4 5 6 7 8 |
<?php $mysql_hostname = "Host name"; $mysql_user = "UserName"; $mysql_password = "Password"; $mysql_database = "Database Name"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database"); mysql_select_db($mysql_database, $bd) or die("Could not select database"); ?> |
IV. File Submit.php
Giờ là việc tạo ra một file mang tên submit.php để thực hiện nhận dữ liệu, và insert chúng vào database. Như đã nói ở trên, sau khi submit dữ liệu ở file index.html, dữ liệu sẽ được qua file submit.php để xử lý trước khi lưu vào cơ sở dữ liệu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php include("db.php"); if($_SERVER["REQUEST_METHOD"] == "POST") { $name=mysql_real_escape_string($_POST['name']); $email=mysql_real_escape_string($_POST['email']); $message=mysql_real_escape_string($_POST['message']); if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0) { $time=time(); mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')"); echo "<h2>Thank You !</h2>"; } } ?> |
Nếu thành công sẽ trả về đoạn thông báo đã submit dữ liệu.
Done! Chúc bạn thành công
