送信する前にフォームにフィールドを追加するにはどうすればよいですか?


111

POSTを使用してHTTPフォームから送信されるいくつかの追加フィールドを追加するためにJavaScriptとJQueryを使用する方法はありますか?

というのは:

<form action="somewhere" method="POST" id="form">
  <input type="submit" name="submit" value="Send" />
</form>

<script type="text/javascript">
  $("#form").submit( function(eventObj) {
    // I want to add a field "field" with value "value" here
    // to the POST data

    return true;
  });
</script>

回答:


161

はい。いくつかの隠しパラメータを試すことができます。

  $("#form").submit( function(eventObj) {
      $("<input />").attr("type", "hidden")
          .attr("name", "something")
          .attr("value", "something")
          .appendTo("#form");
      return true;
  });

30
.appendTo(this)おそらく良いでしょう。
jcuenod

4
@jcuenod originalの方appendTo('#form')がはるかに優れています。そのようなアプローチでは、このフォームの値を使用して別のフォームを送信できるからです。
Andremoniy

7
送信するたびにこれらの入力が蓄積されないように、いくつかの追加ロジックを追加する必要があります。
amos

入力要素が既に存在する場合は、追加する前に削除することをお勧めします$(this).find("input[name="+"something"+"]").remove();
K Vij

42

これを試して:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="field_name" value="value" /> ');
    return true;
});

ファイルフィールドを動的に追加する必要があります。type = fileと値をファイルとしても試しました(WebKitDirectoryを使用しているため、実際にはファイルオブジェクトを取得しています)が、それを渡すことはないようです。ただし、入力テキストは常に渡されます。私を助けてください!
Swaathi Kakarla

this冗長の代わりに使用することによる私の好ましい答え#form
rinogo

15
$('#form').append('<input type="text" value="'+yourValue+'" />');

10

あなたはあなたがhidden input送る必要があるどんな値ででも加えることができます:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="someName" value="someValue">');
    return true;
});

5

これは機能します:

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

ええ、でも結果ページへのリダイレクトはありません。
omikron 2016

3
この作業をする必要があります: $('body').append(form); $(form).submit();
ジェフ・ロウリー

生成されたフィールドが多数あり、それぞれに非表示フィールドを作成したくないので、これは私にとって最も役に立ちました。
Sprachprofi

なぜ@Sprachprofiではないのですか?
退室

3

いくつかのために役立つかもしれません:

(存在する場合、既存の入力をオーバーライドして、オブジェクトを使用してフォームにデータを追加できるようにする関数)[純粋なjs]

(フォームはdom elであり、jqueryオブジェクトではありません[ 必要な場合はjqryobj.get(0) ])

function addDataToForm(form, data) {
    if(typeof form === 'string') {
        if(form[0] === '#') form = form.slice(1);
        form = document.getElementById(form);
    }

    var keys = Object.keys(data);
    var name;
    var value;
    var input;

    for (var i = 0; i < keys.length; i++) {
        name = keys[i];
        // removing the inputs with the name if already exists [overide]
        // console.log(form);
        Array.prototype.forEach.call(form.elements, function (inpt) {
             if(inpt.name === name) {
                 inpt.parentNode.removeChild(inpt);
             }
        });

        value = data[name];
        input = document.createElement('input');
        input.setAttribute('name', name);
        input.setAttribute('value', value);
        input.setAttribute('type', 'hidden');

        form.appendChild(input);
    }

    return form;
}

使用する :

addDataToForm(form, {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

そんな風に使えます

var form = addDataToForm('myFormId', {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

必要に応じて#を追加できます( "#myformid")。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.