停止提交表單中的輸入字段

Question

我正在寫一些JavaScript（一個greasemonkey/userscript），它將在網站上的表單中插入一些輸入字段。

事情是，我不希望那些輸入字段以任何方式影響表單，我不希望它們在提交表單時提交，我只希望我的javascript能夠訪問它們的值。

有什麼方法可以將一些輸入字段添加到表單的中間，並且在表單提交時沒有提交它們？

顯然，理想的情況是輸入字段不在表單元素中，但是我希望我的結果頁面的佈局使我插入的輸入字段出現在原始表單的元素之間。

Answer 1

你可以插入輸入字段沒有「name」屬性：

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

或者一旦形式（jQuery中）提交的，你可以簡單地刪除它們：

$("form").submit(function() { 

    $(this).children('#in-between').remove(); 

}); 

Answer 2

最簡單的做法是插入具有disabled屬性的元素。

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

這樣你仍然可以作爲窗體的子項訪問它們。

已禁用字段的缺點是用戶根本無法與其交互 - 所以如果您有disabled文本字段，用戶將無法選擇文本。如果您有disabled複選框，則用戶無法更改其狀態。

你也可以在表單提交時寫入一些JavaScript來消除你不想提交的字段。

Answer 3

處理表單提交在一個函數中通過onSubmit（）並執行類似下面的操作來刪除表單元素： 使用getElementById()的DOM，然後使用[object].parentNode.removeChild([object])

假設有問題的領域有一個id屬性「my_removable_field」 代碼：

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

這將讓你你在尋找什麼。

Answer 4

你甚至需要它們作爲輸入元素嗎？您可以使用Javascript動態創建div或段落或列表項目或任何包含您想要呈現的信息的內容。

但是，如果交互式元素很重要，並且將這些元素放置在<form>塊之外是個痛處，那麼應該可以在提交頁面時從表單中刪除這些元素。

Answer 5

您可以編寫一個onsubmit的事件處理函數，該函數從所有您希望不包含在表單提交中的輸入字段中移除name屬性。

這裏有一個快速的未經測試的例子：

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; 

Answer 6

我知道這個帖子是古老的，但無論如何，我會回答。我找到的最簡單/最好的方法就是簡單地將名稱設置爲空白。前

將這個您的提交：

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

所有在所有提交功能，可能是這樣的：

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

這仍然將提交表單與所有其他領域，而將不要提交沒有名字的人。

Answer 7

簡單嘗試從輸入元素中刪除名稱屬性。
所以它看起來像

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

Answer 8

$('#serialize').click(function() { 
 
    $('#out').text(
 
    $('form').serialize() 
 
); 
 
}); 
 

 
$('#exclude').change(function() { 
 
    if ($(this).is(':checked')) { 
 
    $('[name=age]').attr('form', 'fake-form-id'); 
 
    } else { 
 
    $('[name=age]').removeAttr('form');  
 
    } 
 
    
 
    $('#serialize').click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/"> 
 
    <input type="text" value="John" name="name"> 
 
    <input type="number" value="100" name="age"> 
 
</form> 
 

 
<input type="button" value="serialize" id="serialize"> 
 
<label for="exclude"> 
 
    <input type="checkbox" value="exclude age" id="exclude"> 
 
    exlude age 
 
</label> 
 

 
<pre id="out"></pre>

Answer 9

您需要在您的表單中添加的onsubmit：

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

和腳本會是這樣：

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

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

這對我的作品每次:)

Answer 10

輸入添加禁用=「禁用」和jQuery的同時去除

當你想使用.removeAttr提交它禁用（「禁用」）屬性

HTML：

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

的jQuery：

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

Answer 11

我只是想增加一個額外的選項：在你輸入添加表單標籤，並指定不網頁上的存在形式的名稱：

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