Làm việc với thông tin form
Chúng ta có thể truy cập đến tất cả các phần tử trong web form qua DOM. Cách thức là khác nhau phụ thuộc vào kiểu phần tử. Ví dụ đối với text box hay select box chúng ta dùng thuộc tính value (hay hàm val() trong jQuery).
Text box
Text box dùng để nhập thông tin người dùng. Ví dụ đoạn mã HTML tạo text box:
<form id="starform" action=""> <p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p> </form> <button >Click to view! </button>
Kết quả:
Lấy thông tin từ text box nhờ thuộc tính name và value và hiển thị khi nhấn button Click to view:
Mã HTML
<button onclick="display()">Click to view! </button>
Mã JavaScript
function display()
{
alert(document.forms["starform"].textname.value);
}
Select box
Một select box là một nhóm các lựa chọn. Ví dụ đoạn mã HTML tạo select box:
<form id="starform" action="">
Select A Country:
<select name="startype" id="starselect">
<option selected="selected"> </option>
<option value="Viet Nam">Viet Nam</option>
<option value="Australia">Australia</option>
<option value="Campuchia">Campuchia</option>
<option value="Lao">Lao</option>
<select>
</form>
Kết quả:
Nếu nhấp chuột vào mũi tên bên phải:
Có thể lấy giá trị của select box thông qua thuộc tính name và value:
document.forms["starform"].startype.value;
Ví dụ hiển thị giá trị của select box bằng cách nhấp chuột vào một button:
Mã HTML
<button onclick="display()">Click here! </button>
Mã JavaScript
function display()
{
alert(document.forms["starform"].startype.value);
}
Chúng ta chọn Viet Nam trong select box và nhấp chuột vào button:
Chúng ta cũng có thể thêm sự kiện change đến select box bằng phương thức addEventListener:
Mã HTML
<button onclick="trigg()">Click here! </button>
Mã JavaScript
function display()
{
alert(document.forms["starform"].startype.value);
}
function trigg()
{
document.getElementById("starselect").addEventListener("change",display,true);
}
Check box
Cho phép người dùng chọn nhiều lựa chọn cùng lúc. Đoạn mã sau minh hoạ cách tạo check box trong HTML:
<form action="" id="starform">
Name:<input type="text" name="Name" value=""><br>
<input type="checkbox" name="coffee" value="cream">With cream<br>
<input type="checkbox" name="coffee" value="sugar">With sugar<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
</form>
Kết quả:
Lưu ý rằng, hai check box có cùng giá trị thuộc tính name (coffee) nhưng khác giá trị của value. Để truy cập đến các phần tử trong form, chúng ta viết mã JavaScript như sau:
var coffee = document.forms["starform"];
coffee là một mảng chứa các phần tử trong form. Giống như mọi mảng, vị trí cho phần tử đầu tiên của coffee là 0 và số phần tử của mảng được thể hiện qua thuộc tính length. Mỗi phần tử trong form có thể được truy cập như sau:
coffee[0] // text box Name coffee[1] // check box With cream coffee[2] // check ox With sugar
Để kiểm tra một check box đã được check hay chưa chúng ta có thể dùng thuộc tính checked và để hiển thị giá trị của check box chúng ta dùng thuộc tính value. Đoạn mã Javascript sau minh hoạ hàm myFuction() sẽ hiển thị tên của khách hang (trong text box Name) và những lựa chọn kèm theo với coffee:
function myFunction() {
var coffee = document.forms[0];
var txtname = "";
txtname = txtname + coffee[0].value;
var txt = "";
var i;
for (i = 1; i < coffee.length; i++) {
if (coffee[i].checked) {
txt = txt + coffee[i].value + " ";
}
}
alert(txtname + " " + "ordered a coffee with: " + txt);
}
Nhập thông tin như sau:
Nhấn nút Send order:
Radio box
Nếu check box cho phép chúng ta thực hiện nhiều lựa chọn cùng lúc thì radio box (thuộc cùng một nhóm) chỉ cho phép thực hiện một lựa chọn tại một thời điểm. Các radio box có cùng giá trị của thuộc tính name thuộc cùng một nhóm. Ví dụ đoạn mã HTML sau:
<form action="" id="profile"> <p>Sex:</p> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> <p>Country:</p> <input type="radio" name="country" value="Viet Nam">Viet Nam<br> <input type="radio" name="country" value="Australia">Australia<br> <br> <input type="button" onclick="myFunction()" value="Register"> </form>
Kết quả:
Trong đoạn mã trên chúng ta có hai nhóm radio box là nhóm sex (giới tính) và nhóm country (quốc gia). Để truy cập đến từng nhóm, chúng ta có thể dùng đoạn mã JavaScript sau:
var country = document.forms["profile"].country; var sex = document.forms["profile"].sex;
mảng country sẽ chứa các radio box nhóm country và mảng sex chứa các radio box nhóm sex. Kiểm tra các radio box nhóm country đã được chọn hay chưa chúng ta dùng thuộc tính checked và value như sau:
var txtcountry = "";
var i;
for (i = 0; i < country.length; i++) {
if (country[i].checked) {
txtcountry = txtcountry + country[i].value + " ";
}
}
Tương tự với nhóm sex:
var txtsex = "";
for (i = 0; i < sex.length; i++) {
if (sex[i].checked) {
txtsex = txtsex + sex[i].value + " ";
}
}
Đoạn mã hoàn chỉnh cho myFunction():
function myFunction() {
var country = document.forms["profile"].country;
var sex = document.forms["profile"].sex;
var txtcountry = "";
var i;
for (i = 0; i < country.length; i++) {
if (country[i].checked) {
txtcountry = txtcountry + country[i].value + " ";
}
}
var txtsex = "";
for (i = 0; i < sex.length; i++) {
if (sex[i].checked) {
txtsex = txtsex + sex[i].value + " ";
}
}
alert("Candiate has sex: " + txtsex + "and country: " + txtcountry);
Lựa chọn thông tin như sau:
Nhấn nút Register:
Làm việc với CSS
Chúng ta có thể dùng thư viện jQuery để làm việc với CSS một cách nhanh chóng và hiệu quả. Nếu chúng ta dùng JavaScript, cú pháp trông như sau:
document.getElementById(id).style.property = new style;
Ví dụ thay đổi màu chữ của phần tử p như sau:
Mã HTML
<p id="p2">Hello World!</p> <p>The paragraph above was changed by a script.</p>
Mã JavaScript
document.getElementById("p2").style.color = "blue";
Có thể tham khảo thêm về CSS và JavaScript tại https://www.w3schools.com/jsref/dom_obj_style.asp
Trần Ngọc Minh Notes 
1 Pingback