Cách trả về nhiều tùy chọn đã chọn trong biểu mẫu JavaScript

Xử lý nhiều lựa chọn trong biểu mẫu JavaScript

Làm việc với các biểu mẫu trong JavaScript là một nhiệm vụ phổ biến, đặc biệt là khi xử lý thông tin đầu vào của người dùng cần được gửi tới máy chủ. Một thách thức chung nảy sinh khi giải quyết trong các biểu mẫu, chẳng hạn như sử dụng danh sách thả xuống "chọn nhiều". Các phương pháp xử lý biểu mẫu cơ bản có thể không nắm bắt được tất cả các tùy chọn đã chọn, dẫn đến chỉ trả về tùy chọn được chọn cuối cùng.

Trong bài viết này, chúng ta sẽ khám phá một cách tiếp cận thực tế để đảm bảo rằng tất cả các phương án đã chọn trong một đều được ghi lại và gửi đúng cách bằng JavaScript. Chúng ta sẽ thực hiện các sửa đổi cần thiết để điều chỉnh biểu mẫu làm việc thành biểu mẫu có thể xử lý nhiều lựa chọn một cách hiệu quả. Cách tiếp cận này cũng đảm bảo rằng dữ liệu có thể được gửi liền mạch tới API PHP để xử lý.

Giải pháp ban đầu của chúng tôi hoạt động tốt cho các lựa chọn đơn lẻ, nhưng khi chúng tôi chuyển sang trường nhiều lựa chọn, điều quan trọng là phải cập nhật logic JavaScript của chúng tôi. Nếu không có những điều chỉnh thích hợp, biểu mẫu chỉ có thể trả về tùy chọn cuối cùng được chọn, đây không phải là hành vi mong muốn. Việc khắc phục điều này liên quan đến việc điều chỉnh cách chúng tôi thu thập và xử lý dữ liệu biểu mẫu.

Đến cuối hướng dẫn này, bạn sẽ biết chính xác cách cập nhật biểu mẫu và JavaScript của mình để xử lý một cách hiệu quả. Bạn sẽ có thể đảm bảo rằng tất cả các tùy chọn đã chọn đều được ghi lại và chuyển chính xác đến chương trình phụ trợ của bạn.

Yêu cầu	Ví dụ về sử dụng
FormData()	Hàm tạo này tạo một đối tượng FormData mới để thu thập các phần tử dữ liệu của biểu mẫu. Nó được sử dụng để dễ dàng thu thập thông tin đầu vào của biểu mẫu, bao gồm cả tải tệp lên mà không cần lặp lại thủ công trên từng trường đầu vào.
getElementsByName()	Truy xuất các phần tử HTML với một thông số cụ thể thuộc tính. Trong kịch bản, nó được sử dụng để nhắm mục tiêu phần tử để nắm bắt tất cả các tùy chọn đã chọn.
options[]	Truy cập các tùy chọn riêng lẻ của một phần tử được chọn. Bộ sưu tập giống như mảng này cho phép lặp lại để kiểm tra các tùy chọn đã chọn, điều này rất quan trọng trong việc xử lý nhiều lựa chọn.
selected	Được sử dụng trong vòng lặp để xác định xem một tùy chọn cụ thể đã được chọn hay chưa. Nó giúp lọc ra các tùy chọn không được chọn trong danh sách thả xuống có nhiều lựa chọn.
set()	Phương thức set() được gọi trên đối tượng FormData để cập nhật hoặc thêm cặp khóa-giá trị, giống như thêm tất cả các giá trị đã chọn từ danh sách thả xuống nhiều lựa chọn vào dữ liệu biểu mẫu trước khi gửi.
URLSearchParams()	Đây là API web tuần tự hóa dữ liệu biểu mẫu thành chuỗi truy vấn. Nó được sử dụng ở đây để chuyển đổi đối tượng FormData thành định dạng chuỗi phù hợp với các yêu cầu HTTP.
XMLHttpRequest()	API được sử dụng rộng rãi để gửi yêu cầu HTTP. Nó được sử dụng để thực hiện gửi dữ liệu không đồng bộ từ giao diện người dùng đến máy chủ, cho phép trang vẫn phản hồi.
fetch()	Một giải pháp thay thế hiện đại cho XMLHttpRequest(), tìm nạp() được sử dụng để thực hiện các yêu cầu HTTP một cách trực quan hơn và với cú pháp dựa trên lời hứa. Nó cung cấp khả năng xử lý các yêu cầu mạng rõ ràng và ngắn gọn hơn.
$.ajax()	Lệnh jQuery giúp đơn giản hóa việc thực hiện các yêu cầu HTTP không đồng bộ. Nó hỗ trợ các cấu hình phức tạp và được sử dụng để xử lý nhiều lựa chọn và gửi chúng đến máy chủ.

Hiểu cách xử lý nhiều lựa chọn trong biểu mẫu JavaScript

Các tập lệnh được cung cấp ở trên nhằm giải quyết một vấn đề phổ biến trong phát triển web: gửi nhiều tùy chọn đã chọn từ một biểu mẫu đến máy chủ bằng JavaScript. Trong thiết lập ban đầu, một biểu mẫu chứa một danh sách thả xuống lựa chọn. Tuy nhiên, khi chuyển sang một thả xuống, chỉ tùy chọn được chọn cuối cùng mới được gửi. Để giải quyết vấn đề này, chúng tôi sửa đổi mã JavaScript để thu thập tất cả các tùy chọn đã chọn trước khi gửi chúng đến máy chủ thông qua yêu cầu HTTP.

Trong giải pháp đầu tiên, đối tượng được sử dụng để nắm bắt các phần tử của biểu mẫu, nhưng vì nó xử lý các danh sách thả xuống có nhiều lựa chọn dưới dạng mảng nên chúng ta phải lặp lại các tùy chọn theo cách thủ công. Vòng lặp kiểm tra từng tùy chọn trong danh sách thả xuống và đẩy những tùy chọn đã chọn vào một mảng. Mảng này sau đó được nối thành định dạng chuỗi có thể được gửi đến máy chủ. Việc sử dụng đảm bảo rằng dữ liệu được truyền không đồng bộ mà không cần làm mới trang. Phương pháp này được hỗ trợ rộng rãi, mặc dù có nhiều phương pháp hiện đại hơn.

Giải pháp thứ hai trình bày cách xử lý vấn đề tương tự bằng cách sử dụng . Tìm nạp cung cấp cách tiếp cận rõ ràng hơn và dựa trên lời hứa hơn XMLHttpRequest, giúp xử lý các hoạt động không đồng bộ dễ dàng hơn. Giống như trong ví dụ đầu tiên, các tùy chọn đã chọn được tập hợp thành một mảng và chuyển đổi thành một chuỗi. các sau đó phương thức này sẽ gửi dữ liệu này đến chương trình phụ trợ PHP. Cách tiếp cận này hiệu quả hơn và được áp dụng rộng rãi trong các ứng dụng web hiện đại do tính linh hoạt và cú pháp trực quan hơn.

Giải pháp thứ ba sử dụng jQuery, một thư viện JavaScript phổ biến giúp đơn giản hóa nhiều thao tác DOM và hoạt động Ajax. Ở đây, các tùy chọn đã chọn sẽ được ghi lại bằng cách sử dụng phương thức trả về trực tiếp các giá trị đã chọn dưới dạng một mảng. Mảng sau đó được gửi qua , một cách đơn giản để thực hiện các yêu cầu HTTP trong jQuery. Cách tiếp cận này yêu cầu ít mã thủ công hơn các ví dụ trước, khiến nó trở thành một giải pháp nhanh chóng khi jQuery đã được đưa vào dự án của bạn.

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert("Submitted");
        }
    };
    xhttp.open("POST", "test2.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(new URLSearchParams(formData).toString());
}

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    fetch('test2.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(formData).toString()
    })
    .then(response => response.text())
    .then(result => alert("Submitted"))
    .catch(error => console.error('Error:', error));
}

$('#submitBtn').on('click', function(e) {
    e.preventDefault();
    var selectedOptions = $('#inputa').val();
    $.ajax({
        type: 'POST',
        url: 'test2.php',
        data: { 'inputa': selectedOptions },
        success: function(response) {
            alert("Submitted");
        },
        error: function() {
            alert("Error occurred");
        }
    });
});

Tối ưu hóa việc xử lý dữ liệu biểu mẫu bằng JavaScript cho nhiều lựa chọn

Khi làm việc với biểu mẫu, việc xử lý nhiều lựa chọn trong danh sách thả xuống là một thách thức mà nhiều nhà phát triển gặp phải. Theo mặc định, biểu mẫu HTML chỉ ghi lại giá trị được chọn cuối cùng trong một thả xuống, điều này có thể dẫn đến việc gửi dữ liệu không đầy đủ. Để đảm bảo tất cả các tùy chọn đã chọn đều được ghi lại, điều quan trọng là phải cập nhật cách xử lý dữ liệu biểu mẫu trước khi gửi đến chương trình phụ trợ.

Một trong những phương pháp hiệu quả nhất là sử dụng API, kết hợp với khả năng lặp lại các tùy chọn đã chọn của JavaScript. Quá trình này đảm bảo rằng tất cả các giá trị đã chọn đều được ghi lại và đưa vào dữ liệu được gửi đến máy chủ. Tùy thuộc vào thiết lập, bạn cũng có thể cần xử lý việc tuần tự hóa dữ liệu, chẳng hạn như sử dụng , để chuẩn bị dữ liệu biểu mẫu theo định dạng mà hệ thống phụ trợ có thể dễ dàng phân tích cú pháp.

Một khía cạnh quan trọng khác cần xem xét là bảo mật và hiệu suất. Mặc dù việc xử lý dữ liệu biểu mẫu rất đơn giản nhưng việc xác thực dữ liệu đầu vào trên cả giao diện người dùng và phụ trợ là rất quan trọng để tránh các lỗ hổng như tấn công tiêm nhiễm. Ngoài ra, việc sử dụng các API hiện đại như đảm bảo hiệu suất tốt hơn và cho phép xử lý lỗi linh hoạt hơn, giúp quá trình gửi dữ liệu biểu mẫu diễn ra suôn sẻ và an toàn hơn.

1. Làm cách nào để truy xuất nhiều tùy chọn đã chọn trong JavaScript?
2. Bạn có thể sử dụng phương thức để lấy phần tử được chọn và lặp qua phần tử đó để truy xuất các giá trị đã chọn.
3. Cách tốt nhất để gửi nhiều lựa chọn qua JavaScript là gì?
4. Sử dụng đối tượng, bạn có thể thu thập thông tin đầu vào của biểu mẫu và xử lý thủ công nhiều lựa chọn bằng cách lặp qua chúng và thêm giá trị vào dữ liệu.
5. Tôi có thể sử dụng API tìm nạp để gửi biểu mẫu không?
6. Vâng, cung cấp một cách hiện đại để gửi yêu cầu HTTP, bao gồm dữ liệu biểu mẫu, với cú pháp rõ ràng hơn và xử lý lỗi tốt hơn.
7. Sự khác biệt giữa API tìm nạp và XMLHttpRequest là gì?
8. Mặc dù cả hai đều có thể gửi yêu cầu HTTP, hiện đại hơn, sử dụng các lời hứa để xử lý không đồng bộ tốt hơn, trong khi sử dụng các cuộc gọi lại.
9. Làm cách nào để xử lý lỗi khi gửi biểu mẫu?
10. Bạn có thể bao gồm logic xử lý lỗi trong hoặc các phương pháp để nắm bắt và phản hồi mọi vấn đề phát sinh trong quá trình gửi biểu mẫu.

Việc xử lý nhiều tùy chọn đã chọn trong biểu mẫu JavaScript yêu cầu phải điều chỉnh cách xử lý dữ liệu biểu mẫu. Bằng cách lặp qua các tùy chọn đã chọn và ghi lại từng giá trị, bạn có thể đảm bảo rằng tất cả các lựa chọn đều được đưa vào khi gửi biểu mẫu.

Cho dù sử dụng , hoặc jQuery, mỗi phương thức đều cho phép gửi biểu mẫu hiệu quả và an toàn tới chương trình phụ trợ PHP. Việc lựa chọn phương pháp phù hợp tùy thuộc vào nhu cầu dự án cụ thể của bạn và các công cụ bạn đã có sẵn.