フォームの入力フィールドが送信されないようにする

ウェブサイトのフォームにいくつかの入力フィールドを挿入するjavascript（greasemonkey / userscript）を書いています。

問題は、これらの入力フィールドがフォームに影響を与えたくない、フォームが送信されたときに送信されたくない、JavaScriptがそれらの値にアクセスできるようにすることだけです。

フォームの途中にいくつかの入力フィールドを追加し、フォームが送信されたときにそれらを送信させない方法はありますか？

入力フィールドがフォーム要素にないことが理想的であることは明らかですが、結果のページのレイアウトで、挿入された入力フィールドが元のフォームの要素の間に表示されるようにしたいと思います。

「name」属性なしで入力フィールドを挿入できます：

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

または、フォームが（でjQuery）送信されたら、単に削除することもできます。

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

最も簡単なことは、disabled属性を持つ要素を挿入することです。

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

この方法でも、フォームの子としてそれらにアクセスできます。

無効化されたフィールドには、ユーザーがフィールドを操作できないという欠点があります。したがって、disabledテキストフィールドがある場合、ユーザーはテキストを選択できません。disabledチェックボックスがある場合、ユーザーはその状態を変更できません。

送信したくないフィールドを削除するためにフォームの送信時に起動するjavascriptを書くこともできます。

入力要素から名前属性を削除しようとするだけです。
だからそれはのように見える必要があります

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

追加のオプションを追加したかっただけです。入力にformタグを追加し、ページに存在しないフォームの名前を指定します。

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

あなたは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;

この投稿が古いことは知っていますが、とにかく返信します。私が見つけた最も簡単で最良の方法は、単に名前を空白に設定することです。

あなたの提出前にこれを入れてください：

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

全体として、送信関数は次のようになります。

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

これにより、他のすべてのフィールドを含むフォームが送信されますが、名前のないフォームは送信されません。

入力にdisabled = "disabled"を追加し、jqueryが.removeAttr（ 'disabled'）を使用して送信する場合はdisabled属性を削除します

HTML：

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

jquery：

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

上記の回答はすべて、フォームコントロールに名前を付ける（またはフォームコントロールを実際に送信する前にプログラムで削除する）ことについてはすべて述べています。

しかし、私の研究全体で、この投稿で言及されていない他の解決策が見つかりました：
処理されない/送信されないようにするフォームコントロールをカプセル化する場合<form>、method属性もpath（および送信タイプコントロールもない）別のタグ内にボタンまたはそれにネストされた送信入力のように）、親フォームを送信すると、カプセル化されたフォームコントロールは含まれません。

<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>

[name = "notSent"]コントロール値は処理されず、サーバーのPOSTエンドポイントに送信されませんが、[name = "sent"]のコントロール値は処理されます。

この解決策は逸話かもしれませんが、私はまだ後世のためにそれを残しています...

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);
}

これはあなたが探しているものをあなたに正確に与えます。

そもそもそれらを入力要素にする必要がありますか？JavaScriptを使用して、div、段落、リストアイテム、または提示する情報を含むも​​のを動的に作成できます。

しかし、インタラクティブな要素が重要で、それらの要素を<form>ブロックの外側に配置するのが難しい場合は、ページが送信されたときにこれらの要素をフォームから削除できるはずです。

フォームに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;
        }
    }

これはいつも私のために働きます:)