Trong một biểu mẫu HTML, thuộc tính action
được sử dụng để chỉ ra nơi dữ liệu của biểu mẫu được gửi đến khi nó được gửi. Giá trị này có thể được đặt khi biểu mẫu được tạo, nhưng đôi khi bạn có thể muốn đặt nó một cách linh hoạt. Trong hướng dẫn này, chúng ta sẽ xem xét các cách mà thuộc tính action
của một biểu mẫu có thể được đặt động bằng JavaScript
Để bắt đầu, hãy tạo một tệp HTML và dán biểu mẫu sau vào phần thân của nó
Name:
Email:
Đánh dấu ở trên dành cho biểu mẫu đơn giản có hai trường và nút gửi. Chúng tôi đã đặt một trình lắng nghe onsubmit
sẽ được gọi khi biểu mẫu được gửi. Đến lượt nó, điều này sẽ thực hiện cuộc gọi đến hàm setAction[]
mà chúng ta sẽ sớm xác định. Trong lệnh gọi hàm, biểu mẫu chuyển tham chiếu đến chính nó [this
]
Thêm kiểu CSS sau
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
Thêm JavaScript sau vào tệp
function setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
Ở trên, chúng tôi chỉ định tham chiếu biểu mẫu được truyền cho biến
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
0. Sau đó, chúng tôi đặt thuộc tính action
của nó với form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
2. Điều này sẽ dẫn đến hành động của biểu mẫu được đặt thành form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
3. form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
4 sẽ là URL mà tệp HTML đang chạy trên đó. Để kiểm tra xem hành động đã được đặt chưa, chúng tôi hiển thị giá trị của nó trong hộp cảnh báo. Sau đó, hàm trả về form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
5 để ngăn không cho biểu mẫu được gửi. Điều này được bao gồm trong mã demo vì trang form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
6 không tồn tại, nhưng trong một ứng dụng thực tế, bạn sẽ muốn gửi biểu mẫuTiếp theo, chúng ta sẽ xem xét một ví dụ khác trong đó hành động của biểu mẫu sẽ được đặt tùy thuộc vào nút được sử dụng để gửi biểu mẫu
Bạn có thể thêm phần sau vào tệp HTML
Email:
Password:
Mẫu trên có hai nút đã được thiết lập với
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
7 người nghe. Mỗi người nghe thực hiện cuộc gọi đến một nút khác nhau khi được nhấpThêm JavaScript sau vào tệp
function loginUser[] {
document.user_form.action = "login.html";
alert[document.user_form.action];
return false;
}
function registerUser[] {
document.user_form.action = "register.html";
alert[document.user_form.action];
return false;
}
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
8 được gọi khi nhấp vào nút Đăng nhập. Hàm đặt form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
9 làm giá trị của thuộc tính hành động của biểu mẫu. Trong ví dụ này, chúng tôi nhận được một tham chiếu đến biểu mẫu với function setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
0. Để điều này hoạt động, thuộc tính function setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
1 của biểu mẫu phải được đặt thành function setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
2. Sau khi đặt thuộc tính hành động, chúng tôi cảnh báo giá trị và trả về form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
5 do đó ngăn việc gửi biểu mẫufunction setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
4 được gọi khi nhấp vào nút Đăng ký và nó đặt function setAction[form] {
form.action = "register.html";
alert[form.action];
return false;
}
5 làm hành động của biểu mẫu