Hướng dẫn how do we access the elements of a form using form object in javascript? - làm cách nào để chúng tôi truy cập các phần tử của biểu mẫu bằng đối tượng biểu mẫu trong javascript?

Để truy cập một biểu mẫu thông qua JavaScript, chúng ta cần có được một tham chiếu đến đối tượng biểu mẫu. Một cách rõ ràng để tiếp cận, là sử dụng phương pháp getElementById. Chẳng hạn, nếu chúng ta có biểu mẫu với thuộc tính ID

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

var oForm = document.getElementById('subscribe_frm');

Tuy nhiên, cách tiếp cận này có giới hạn rằng thẻ

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

Một cách để tiếp cận là sử dụng từ khóa

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

Thay thế khác là sử dụng bộ sưu tập đối tượng

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

var oForm = document.forms[1]; 

var oForm = document.forms[1]; 

Truy cập đối tượng var oForm = document.forms[1]; 3 thông qua JavaScript bằng thuộc tính

Page Title: Page URL: Tags (comma separated):

8

Mỗi yếu tố trong một biểu mẫu kích hoạt các sự kiện dựa trên hành động của người dùng có thể được xử lý bởi một trình xử lý sự kiện thích hợp. Chẳng hạn, nút gửi khi được nhấp vào kích hoạt trình xử lý sự kiện Onclick. Vì từ khóa

var oForm = document.forms[1]; 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

Hơn nữa, trong JavaScript, mọi đối tượng phần tử của biểu mẫu đều có thuộc tính tham chiếu đối tượng biểu mẫu. Vì vậy, nếu chúng ta chuyển

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

Trong mẫu trên, trình xử lý sự kiện

var oForm = document.forms[1]; 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

var oForm = document.forms[1]; 

Hãy xem bản demo này hiển thị hai biểu mẫu trên một trang web. Bạn cũng có thể tải xuống mã.

Truy cập nhiều biểu mẫu bằng bộ sưu tập

Page Title: Page URL: Tags (comma separated):

9 đối tượng var oForm = document.forms[1]; 0

Đối tượng tài liệu của một trang web có một thuộc tính có tên

var oForm = document.forms[1]; 

Chẳng hạn, nếu chúng ta có hai biểu mẫu, Subbormound_article và và SubbookMarkmark sẽ xuất hiện trên một trang web theo thứ tự này, chúng ta có thể truy cập vào biểu mẫu có tên là Subbors_bookmark, theo hai cách sau:

var oForm = document.forms[1]; 

HOẶC

var oForm = document.forms["submit_bookmark"]; 

Chúng ta cũng có thể sử dụng cùng một cách tiếp cận để truy cập các yếu tố hình thức riêng lẻ. Mỗi trường biểu mẫu của một biểu mẫu được chứa trong bộ sưu tập mẫu ____ ____37 là một mảng javascript tương tự như bộ sưu tập

<form name ="submit_bookmark" action="#">

Page Title: <input type="text" name="page_title" size="50">

Page URL: label><input type="text" name="page_url" size="50">

Tags (comma separated): <input type="text" name="tags_list" size="40">

<input type="button" name="submit" value="Save Bookmark" onclick="showElements(this.form);">

form>
 

Để truy cập trường đầu vào văn bản có tên là Tag Tags_List của biểu mẫu có tên là Subbors_bookmark (là biểu mẫu thứ hai trên trang web, như bạn đã thấy trong bản demo), chúng ta có thể sử dụng một trong các phương thức sau:

• Đầu tiên, hãy nhận tham chiếu biểu mẫu:

var oForm = document.forms["submit_bookmark"];

• Tiếp theo, chúng tôi nhận được tham chiếu đến phần tử của Tag Tags_List theo một trong các cách sau:

var oTagsList = oForm.elements[2]; OR
var oTagsList = oForm.elements["tags_list"];

• Để nhận giá trị của phần tử đầu vào, như trước:

var tags = oTagsList.value; 

Xin hãy xem bản demo chi tiết này để hiểu các khái niệm được trình bày. Tải xuống mã.

Ví dụ: Sao chép từ biểu mẫu này sang biểu mẫu khác

Hãy để chúng tôi nói rằng chúng tôi phải sao chép giá trị của một phần tử ở một dạng thành một phần tử ở dạng khác. Hãy xem bản demo này.

Chúng tôi có thể thực hiện điều này bằng cách chuyển tên của hai biểu mẫu cũng như tên của các thành phần nguồn và mục tiêu cho hàm JavaScript:

<a href="#" onClick=" javascript: copyFormElementToElementOfDifferentForm('submit_article', 'submit_bookmark', 'site_cat', 'tags_list');">Copy site_cat element value of the first form to the input field named "tags_list" of the second forma>
 

Hãy xem việc thực hiện chức năng này:

var oForm1 = document.forms[oForm1Name];
var oForm2 = document.forms[oForm2Name];
var oForm1Element = oForm1[oForm1ElementName];
var oForm2Element = oForm2[oForm2ElementName];
if (oForm2Element.value == '')
{
    oForm2Element.value += oForm1Element.value;
}
else
{
    oForm2Element.value += ', ' + oForm1Element.value;
}

Trước tiên chúng tôi có được tham chiếu đến các đối tượng hình thành bằng tên của chúng. Sau đó, chúng tôi có được các tham chiếu đến các phần tử nguồn và đích, một lần nữa bằng cách sử dụng các tên thành phần. Sau đó, đó là một công việc dễ dàng để sao chép giá trị của phần tử nguồn vào phần tử đích.

Tải xuống mã.

Xem thêm

• Cách nhận giá trị của một phần tử biểu mẫu: thả xuống và danh sách
• Cách nhận giá trị của một phần tử biểu mẫu: Hộp kiểm và nút radio
• Cách nhận giá trị của phần tử biểu mẫu bằng JavaScript
• Sử dụng JavaScript để đặt lại hoặc xóa biểu mẫu
• Nút gửi biểu mẫu HTML
• Cách tạo biểu mẫu web và nhanh chóng nhận nó trực tuyến
• Nút JavaScript
• Xác thực hình thức JavaScript: Nhanh chóng và dễ dàng!
• Tập lệnh xác thực biểu mẫu JavaScript: Nhiều tính năng khác
• JavaScript cửa sổ bật lên