web-dev-qa-db-ja.com

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

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

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

フォームの中央に入力フィールドを追加し、フォームの送信時にそれらを送信しないようにする方法はありますか？

当然、入力フィールドがフォーム要素にないことが理想ですが、挿入された入力フィールドが元のフォームの要素の間に表示されるように、結果のページのレイアウトが必要です。

javascripthtmlformsuserscripts
104
Acorn

「名前」属性なしで入力フィールドを挿入できます。

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

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

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

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

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

この方法では、フォームの子として引き続きアクセスできます。

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

フォーム送信時に起動するJavaScriptを記述して、送信したくないフィールドを削除することもできます。

51
Johrn

入力要素からname属性を削除してみてください。
したがって、次のように見える必要があります

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

フォーム送信に含めないすべての入力フィールドから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;
8
Jacob Relkin

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

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

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

HTML：

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

jquery：

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

3
Pikka pikka

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

提出する前にこれを置いてください：

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

すべての送信関数は、次のようになります。

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

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

1
Will

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

これはいつも私のために働く:)

0
Vasilakakis Anastasios

OnSubmit（）を介して関数でフォームの送信を処理し、フォーム要素を削除するために以下のようなことを実行します。DOMのgetElementById()を使用し、次に[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);
}

これにより、探しているものを正確に取得できます。

0
ring bearer

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

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

0
BlairHippo
$('#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>
0
Denis Lukyanov