Lấy dữ liệu từ một form popup
Giả sử bi giờ chúng ta có 2 cửa sổ trình duyệt. Cửa sổ mẹ cần lấy một ít dữ liệu từ cửa sổ con. Vậy thì làm thế nào để lấy được bây giờ? Điều này khá đơn giản với Javascript. Đầu tiên ta xây dựng cái cửa sổ mẹ.
Ở đây tôi để một phần tử có id là thumotti trên cửa sổ mẹ. Phần tử này sẽ hiển thị nội dung lấy từ một cái thẻ HTML nào đó của cái cửa sổ con:
<div id="thumotti"></div>
Tiếp đó, trên cửa sổ mẹ, ta tạo ra một cái đoạn javascript để khi phát sinh sự kiện onclick trên một thẻ nào đó
thì nó sẽ đẻ ra cái cửa sổ con:
<script language="javascript">
function ShowDialog()
{
window.open('test.htm',';D','scrollbars=1, width=450,height=400');
}
</script>
Bây giờ ta định nghĩa một cái liên kết mà khi kích chuột vào nó thì hệ
thống sẽ gọi đến hàm javascript trên để "đẻ" ra cửa sổ con:
<a onclick=ShowDialog();>Đẻ ra con đi nào</a>
Rồi, thế là xong phần "cửa sổ mẹ", bây giờ chúng ta tạo ra thằng con, với
cái tên là test.htm (như trong đoạn javascript trên). File này chứa một
cái trời đất gì trên đó cũng được. Đây có thể là một cái trang PHP để
giao tiếp với CSDL, sau khi thực hiện chán chê các thao tác với CSDL thì
ta cần truyền lại cái gì đó cho "cửa sổ mẹ". Để cho đơn giản thì tôi tạo
mỗi một cái thẻ <div> với id là "conday" và nhét vài thứ linh
tinh vào đó, và nhiệm vụ của tôi là lấy nội dung từ thẻ div của "cửa sổ con"
để trả về cho "cửa sổ mẹ".
Tạo thẻ div với id là conday trên cửa sổ con:
<div id="conday">Hi, hello, I'm <b><i>CMXQ</i></b></div>
Đoạn code javascript sau đây sẽ trả về nội dung của thẻ div có id là
"thumotti" trên "cửa sổ mẹ":
<script language='javascript'>
function xong()
{
opener.document.getElementById('thumotti').innerHTML=document.
getElementById('conday').innerHTML;
close();
}
</script>
Tạo một nút để click chuyển dữ liệu từ "cửa sổ con" sang "cửa sổ mẹ"
Trên Mozilla Firefox:
<input type='button' name = 'button' value='Đã xong' onclick='xong();'>
Trên Internet Explorer:
<FORM><INPUT type="button" value="New Window!" onClick="window.
open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400,
height=200')"></FORM>
Ghi chú: Mọi thẻ HTML nếu có id thì đều có thể tìm đến nó để nghịch
ngợm thông qua một DOM object có tên là document (sử dụng phương thức
getElementById). Để lấy hoặc thiết lập nội dung của thẻ đó, ta sử dụng
thuộc tính innerHTML: document.getElementById('thumotti').innerHTML="xyz";
opener.document.getElementById('thumotti').innerHTML: chính là giá trị thẻ HTML
có ID là thumoti của trang mở cái popup đó ra (trang mẹ).
Nguyễn Đình Thắng @ 04:55 19/05/2017
Số lượt xem: 189
- Xử lý ngày tháng với Javascript (19/05/17)
- Căn bản về thẻ HTML (03/03/10)
- Dấu mã nguồn ASP (03/03/10)
- Tự làm bộ cài đặt phần mềm (23/02/10)
- Kinh nghiệm sửa lỗi PHP (23/02/10)






























h


">




