Làm cách nào để gọi hàm JavaScript sau khi gửi biểu mẫu?

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ó

<form onsubmit="return setAction(this)">
  <div>
    <label>Name:label>
    <input id="name" name="name" type="text">
  div>
  <div>
    <label>Email:label>
    <input id="email" name="email" type="email">
  div>
  <div>
    <input id="submit" type="submit">
  div>
form>

Đá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ẫu

Tiế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

<form name="user_form">
  <div>
    <label>Email:label>
    <input id="user_email" name="user_email" type="email">
  div>
  <div>
    <label>Password:label>
    <input id="user_password" name="user_password" type="password">
  div>
  <div>
    <input id="login" type="submit" value="Login" onclick="return loginUser()">
  div>
  <div>
    <input id="register" type="submit" value="Register" onclick="return registerUser()">
  div>
form>

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ấp

Thê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ẫu

function 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

Làm cách nào để gọi hàm JavaScript khi trang được tải?

Cách đầu tiên để gọi một hàm khi tải trang là sử dụng sự kiện tải bên trong thẻ . Như bạn đã biết, phần thân HTML chứa toàn bộ nội dung của trang web và khi tất cả phần thân HTML tải trên trình duyệt web, nó sẽ gọi hàm từ JavaScript.

Điều gì xảy ra khi một biểu mẫu được gửi bằng JavaScript?

Mỗi khi biểu mẫu được gửi, hàm saveform() sẽ lưu dữ liệu biểu mẫu trong trình duyệt . Điều này tạo ra một nút mới, có nhãn xuất, ngoài nút gửi đã có trong biểu mẫu.