Xem bài viết Cơ bản về Form trong PHP

Cơ bản về Form trong PHP

Jul 17, 2012Php & MySQL

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.

Cơ bản về form trong PHP - 2Cwebvn

Member login

2. CSS

Thêm một chút css để trang trí cho trang nha dễ nhìn tí nha các bạn.
	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.
<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.php
			var name        = $('#name').attr('value');
			var email       = $('#email').attr('value');
		 
			$.ajax({
				type: "POST", // phương thức gởi đi
				url: "test.php", // nơi mà dữ liệu sẽ chuyển đến khi submit
				data: "name="+ name +"&email="+ email, // giá trị post
				success: 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ề.
  // Các giá trị được lưu trong biến $_POST
  // Kiểm tra nếu được post
  if($_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 '

Name: ' . $name . '
Email: ' . $email . '

'; }
Và nhớ đừng quên chèn thư viện jquery.min.js vào nhé.
	<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:
co ban ve form trong php 001 - 2cwebvn
co ban ve form trong php 002 - 2cwebvn
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 viết 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 đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments