Bagaimana cara menambahkan bidang tambahan ke formulir sebelum mengirimkan?

111

Apakah ada cara menggunakan javascript dan JQuery untuk menambahkan beberapa bidang tambahan untuk dikirim dari formulir HTTP menggunakan POST?

Maksudku:

<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>
jquery html forms post field Menakuti
sumber
2
kemungkinan duplikat jQuery - tambahkan parameter tambahan saat mengirimkan (BUKAN ajax)
Marijn

Jawaban:

161

Ya, Anda dapat mencoba dengan beberapa parameter tersembunyi.

  $("#form").submit( function(eventObj) {
      $("<input />").attr("type", "hidden")
          .attr("name", "something")
          .attr("value", "something")
          .appendTo("#form");
      return true;
  });
Suresh Atta
sumber
30
.appendTo(this)mungkin akan lebih baik.
jcuenod
4
@jcuenod original appendTo('#form')jauh lebih baik, karena pendekatan semacam itu memungkinkan pengiriman formulir lain dengan nilai dari yang satu ini.
Andremoniy
7
Anda harus menambahkan beberapa logika tambahan untuk menghindari mengumpulkan input ini dengan setiap pengiriman.
amos
Anda mungkin ingin menghapus elemen input sebelum menambahkannya jika sudah ada$(this).find("input[name="+"something"+"]").remove();
K Vij
42

Coba ini:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="field_name" value="value" /> ');
    return true;
});
Khawer Zeshan
sumber
Saya perlu menambahkan bidang file secara dinamis. Saya mencoba memiliki type = file, dan nilainya juga sebagai file (saya menggunakan WebKitDirectory, jadi saya benar-benar mendapatkan objek file), namun sepertinya tidak pernah melewatkannya. Teks input selalu dilewatkan. Tolong bantu saya!
Swaathi Kakarla
Jawaban pilihan saya karena menggunakan thisalih-alih berlebihan#form
rinogo
15 
$('#form').append('<input type="text" value="'+yourValue+'" />');
de_nuit
sumber
10

Anda dapat menambahkan hidden inputdengan nilai apa pun yang perlu Anda kirim:

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

Ini bekerja:

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")
    } 
});
Jeff Lowery
sumber
Ya, tapi tidak ada redirect ke halaman hasil.
omikron
3
ini harus bekerja: $('body').append(form); $(form).submit();
Jeff Lowery
Ini adalah yang paling membantu saya, karena saya memiliki banyak kolom yang dihasilkan dan saya tidak ingin membuat kolom tersembunyi untuk masing-masingnya.
Sprachprofi
Mengapa tidak @Sprachprofi?
Displee
3

Semoga bermanfaat bagi beberapa:

(fungsi yang memungkinkan Anda menambahkan data ke formulir menggunakan objek, dengan menimpa input yang ada, jika ada) [pure js]

(bentuk adalah dom el, dan bukan objek jquery [ jqryobj.get (0) jika Anda membutuhkan ])

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

Penggunaan:

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

Anda juga bisa menggunakannya seperti itu

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

Anda dapat menambahkan # jika Anda suka juga ("#myformid").

Mohamed Allal
sumber