Biểu mẫu gửi JavaScript với các trường ẩn

Khi người dùng gửi biểu mẫu HTML, tất cả dữ liệu được người dùng nhập vào biểu mẫu sẽ được gửi dưới dạng yêu cầu GET hoặc POST tới URL được chỉ định trong thuộc tính “ACTION” của FORM

<form action="http://www.labnol.org/sendmail.php" method="post">...form contents...</form>

Trong ví dụ trên, một yêu cầu HTTP POST được gửi tới sendmail. tập lệnh php khi gửi biểu mẫu. Bạn có thể thêm target=”_blank” vào thẻ FORM để xử lý yêu cầu trong một cửa sổ mới

Tuy nhiên, nếu bạn muốn gửi MẪU trên trang ở chế độ nền mà không hướng trình duyệt đến trang khác (tài liệu. vị trí. href thay đổi khi gửi biểu mẫu), bạn có hai tùy chọn

Lựa chọn 1. Bạn có thể tạo IFRAME vô hình bên trong trang HTML của mình và đặt nó làm mục tiêu cho MẪU gốc. Điều này sẽ gửi biểu mẫu nhưng không tải lại cửa sổ chính

<form action="http://example.com/script.php" method="POST" target="hidden-form">...form contents...</form>
<iframe style="display:none" name="hidden-form"></iframe>

Lựa chọn 2. Có một phương pháp khác cho phép bạn tạo tải trọng tùy chỉnh trước khi gửi biểu mẫu. Không giống như gửi biểu mẫu dựa trên IFRAME, đoạn mã sau tạo yêu cầu gửi biểu mẫu tiêu chuẩn và do đó, vị trí trình duyệt của bạn sẽ thay đổi và trang hiện tại sẽ được thêm vào lịch sử trình duyệt

submitFORM('http://example.com/script.php', 'POST',
    {'name':'digital+inspiration', 'age':'100', 'sex','M'});

function submitFORM(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Move the submit function to another variable
    //so that it doesn't get overwritten.
    form._submit_function_ = form.submit;

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form._submit_function_();
}

Javascript

Chia sẻWhatsAppTwitterFacebook

Amit Agarwal

Chuyên gia phát triển của Google, Nhà vô địch Google Cloud

Amit Agarwal là Chuyên gia nhà phát triển của Google về Google Workspace và Google Apps Script. Ông có bằng kỹ sư về Khoa học Máy tính (I. I. T. ) và là blogger chuyên nghiệp đầu tiên ở Ấn Độ

Amit đã phát triển một số tiện ích bổ sung phổ biến của Google bao gồm Mail Merge cho Gmail và Document Studio. Đọc thêm về Lifehacker và YourStory

Làm cách nào để gửi biểu mẫu ẩn trong JavaScript?

Làm cách nào để liên kết giá trị với trường ẩn trong JavaScript?

Làm cách nào để ẩn trường nhập liệu trong HTML bằng JavaScript?