Bài này 2Cwebvn xin giới thiệu đến các bạn cơ bản về form trong php, vấn đề này tuy không mới nhưng mình nghĩ sẽ có ích cho các bạn mới làm quen với php. Trong bài viết mình có xử lý thêm một chút kỹ thuật ajax để post dữ liệu qua trang khác, sau đó trả kết quả trở về, thấy nó cũng hay hay :) . Giờ thì mình cùng bắt đầu vào bài nào.
demo download
1. HTML
Phần HTML này mình sẽ tạo một cái form có 2 field là name và email, form có phương thức là post và có ation đến trang test.php. Và có một cái thẻ div để hiển thị kết quả khi mình nhấn submit.
1
2
3
4
5
6
7
8
9
10
11
| <h2>Cơ bản về form trong PHP - 2Cwebvn</h2><form id="tutorial" action="test.php" method="post"><fieldset><legend> Member login </legend><p><label for="name">Name:</label><input type="text" name="name" id="name"></p><p><label for="email">Email:</label><input type="text" name="email" id="email"></p><p class="submit"><input id="submit" type="submit" value="Send"></p></fieldset></form><div class="success" style="display:none;">Nơi hiển thị kết quả</div> |
2. CSS
Thêm một chút css để trang trí cho trang nha dễ nhìn tí nha các bạn.
1
2
3
4
5
6
| body {background: url(background_2cwebvn.png);color:#DB2E66;}#tutorial{width:300px; margin:50px auto 0px;}h2{width:400px; margin:50px auto 0px;}label{width:50px; float:left;}p.submit{margin-left:50px;}p.success{width:400px; margin:50px auto 0px;font-size:30px; } |
3. JQUERY
Và đây là phần Javascript, mình có chú thích hết cho các bạn rồi đó, cũng dễ hiểu thôi mà. :). Có gì mà không hiểu các bạn có thể commnent bên dưới, mình sẽ cố gắng trả lời.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script type="text/javascript">$(document).ready(function(){$("form#tutorial").submit(function() { // khi submit form// Lấy dữ liệu từ form và gởi đến test.phpvar name = $('#name').attr('value');var email = $('#email').attr('value');$.ajax({type: "POST", // phương thức gởi điurl: "test.php", // nơi mà dữ liệu sẽ chuyển đến khi submitdata: "name="+ name +"&email="+ email, // giá trị postsuccess: function(answer){ // if everything goes well$('form#tutorial').hide(); // ẩn form đi$('div.success').fadeIn(); // hiển thị thẻ div success$('div.success').html(answer); // đặt kết quả trả về từ test.php vào thẻ div success}});return false; // Form sẽ không chuyển đến trang test.php});});</script> |
Và đây là nội dung file test.php, file này để nhận dữ liệu khi submit, sau đó xử lý gì đó rồi trả kết quả trở về.
1
2
3
4
5
6
7
8
9
10
11
| // Các giá trị được lưu trong biến $_POST// Kiểm tra nếu được postif($_POST) {// Đưa dữ liệu vào các biến$name = strip_tags($_POST['name']);$email = strip_tags($_POST['email']);// Phần xử lý của các bạn, có thể là lưu xuống database, kiểm tra login ,v.v..// ......// Hiển thị chúng lên màn hình echo '<p class="success">Name: ' . $name . ' <br> Email: ' . $email . '</p>';} |
Và nhớ đừng quên chèn thư viện jquery.min.js vào nhé.
1
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> |
Và đây là kết quả sau khi hoàn thành:
Các bài viết tiếp theo mình sẽ hướng dẫn làm một form hoàn chỉnh như validate, send mail,.. Các bạn nhớ đón xem nhé.
Kết luận
Bạn có thích bài hướng dẫn này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!
Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!
Comments[ 0 ]
Đăng nhận xét