Ngăn không cho gửi trường nhập trong biểu mẫu

Tôi đang viết một số javascript (greasemonkey / userscript) sẽ chèn một số trường đầu vào vào một biểu mẫu trên một trang web.

Vấn đề là, tôi không muốn những trường đầu vào đó ảnh hưởng đến biểu mẫu theo bất kỳ cách nào, tôi không muốn chúng được gửi khi biểu mẫu được gửi, tôi chỉ muốn javascript của tôi có quyền truy cập vào các giá trị của chúng.

Có cách nào tôi có thể thêm một số trường đầu vào vào giữa biểu mẫu và không gửi chúng khi biểu mẫu được gửi không?

Rõ ràng điều lý tưởng là để các trường đầu vào không nằm trong phần tử biểu mẫu, nhưng tôi muốn bố cục của trang kết quả có các trường đầu vào được chèn của tôi xuất hiện giữa các phần tử của biểu mẫu ban đầu.

Bạn có thể chèn các trường đầu vào mà không có thuộc tính "name":

<input type="text" id="in-between" />

Hoặc bạn có thể chỉ cần xóa chúng sau khi biểu mẫu được gửi (trong jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

Điều dễ dàng nhất để làm là chèn các phần tử có disabledthuộc tính.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

Bằng cách này, bạn vẫn có thể truy cập chúng khi là con của biểu mẫu.

Các trường bị vô hiệu hóa có nhược điểm là người dùng không thể tương tác với chúng - vì vậy nếu bạn có disabledtrường văn bản, người dùng không thể chọn văn bản. Nếu bạn có một disabledhộp kiểm, người dùng không thể thay đổi trạng thái của nó.

Bạn cũng có thể viết một số javascript để kích hoạt khi gửi biểu mẫu để xóa các trường bạn không muốn gửi.

Đơn giản, hãy thử xóa thuộc tính name khỏi phần tử đầu vào.
Vì vậy, nó phải trông giống như

<input type="checkbox" checked="" id="class_box_2" value="2">

Tôi chỉ muốn thêm một tùy chọn bổ sung: Trong đầu vào của bạn, hãy thêm thẻ biểu mẫu và chỉ định tên của biểu mẫu không tồn tại trên trang của bạn:

<input form="fakeForm" type="text" readonly value="random value" />

Bạn có thể viết một trình xử lý sự kiện để onsubmitxóa namethuộc tính khỏi tất cả các trường đầu vào mà bạn không muốn đưa vào biểu mẫu gửi.

Đây là một ví dụ nhanh chưa được kiểm tra:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

Tôi biết bài đăng này là cổ xưa, nhưng tôi sẽ trả lời dù sao. Cách dễ nhất / tốt nhất mà tôi đã tìm thấy là chỉ cần đặt tên thành trống.

Đặt cái này trước khi bạn gửi:

document.getElementById("TheInputsIdHere").name = "";

Tất cả trong tất cả chức năng gửi của bạn có thể trông giống như sau:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Thao tác này sẽ vẫn gửi biểu mẫu với tất cả các trường khác của bạn, nhưng sẽ không gửi biểu mẫu không có tên.

Thêm vô hiệu hóa = "bị vô hiệu hóa" vào đầu vào và trong khi jquery xóa thuộc tính bị vô hiệu hóa khi bạn muốn gửi nó bằng cách sử dụng .removeAttr ('bị vô hiệu hóa')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');

Tất cả các câu trả lời ở trên đã nói lên mọi thứ về việc (không) đặt tên cho các điều khiển biểu mẫu hoặc xóa chúng theo chương trình trước khi thực sự gửi biểu mẫu của bạn.

Mặc dù, trong quá trình nghiên cứu, tôi đã tìm thấy một giải pháp khác mà tôi chưa thấy được đề cập trong bài đăng này:
Nếu bạn đóng gói các điều khiển biểu mẫu mà bạn muốn không xử lý / không gửi, bên trong một <form>thẻ khác không có methodthuộc tính cũng như path(và rõ ràng là không có điều khiển loại gửi như một nút hoặc gửi đầu vào được lồng trong đó), thì việc gửi biểu mẫu gốc sẽ không bao gồm các điều khiển biểu mẫu đóng gói đó.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

Giá trị điều khiển [name = "notSent"] sẽ không được xử lý cũng như không được gửi đến điểm cuối POST của máy chủ, nhưng giá trị từ [name = "sent"] sẽ.

Giải pháp này có thể chỉ là một giai thoại nhưng tôi vẫn để lại cho hậu thế ...

Xử lý việc gửi biểu mẫu trong một hàm thông qua onSubmit () và thực hiện điều gì đó giống như bên dưới để loại bỏ phần tử biểu mẫu: Sử dụng getElementById()DOM, sau đó sử dụng[object].parentNode.removeChild([object])

giả sử trường của bạn được đề cập có mã thuộc tính id "my_removable_field":

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Điều này sẽ giúp bạn có được chính xác những gì bạn đang tìm kiếm.

Bạn thậm chí có cần chúng là các yếu tố đầu vào ngay từ đầu không? Bạn có thể sử dụng Javascript để tạo động các div hoặc đoạn văn hoặc liệt kê các mục hoặc bất cứ thứ gì có chứa thông tin bạn muốn trình bày.

Nhưng nếu yếu tố tương tác là quan trọng và việc đặt những yếu tố đó bên ngoài <form>khối là điều khó khăn, thì bạn sẽ có thể xóa những yếu tố đó khỏi biểu mẫu khi trang được gửi.

Bạn cần thêm onsubmit tại biểu mẫu của mình:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

Và kịch bản sẽ như thế này:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Điều này làm việc cho tôi mọi lúc :)