Göndermeden önce forma ek alanlar nasıl eklenir?


111

POST kullanılarak HTTP formundan gönderilecek bazı ek alanlar eklemek için javascript ve JQuery kullanmanın bir yolu var mı?

Demek istediğim:

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

2
olası jQuery
gönderime

Yanıtlar:


161

Evet, bazı gizli parametrelerle deneyebilirsiniz.

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

30
.appendTo(this)muhtemelen daha iyi olurdu.
jcuenod

4
@jcuenod original appendTo('#form')çok daha iyi, çünkü böyle bir yaklaşım, bundan değerlerle başka bir form gönderilmesine izin veriyor.
Andremoniy

7
Her gönderimde bu girdileri biriktirmekten kaçınmak için fazladan bir mantık eklemeniz gerekir.
amos

Zaten mevcut olması durumunda, muhtemelen giriş öğesini eklemeden önce kaldırmak isteyeceksiniz$(this).find("input[name="+"something"+"]").remove();
K Vij

42

Bunu dene:

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

Dinamik olarak bir dosya alanı eklemem gerekiyor. Type = file ve dosya olarak değeri de denedim (WebKitDirectory kullanıyorum, bu yüzden aslında dosya nesnelerini alıyorum), ancak hiçbir zaman geçmiyor gibi görünüyor. Yine de giriş metni her zaman geçer. Lütfen bana yardım edin!
Swaathi Kakarla

thisGereksiz yerine kullanmaktan dolayı tercih #form
ettiğim

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

10

hidden inputGöndermeniz gereken değerle bir ekleyebilirsiniz :

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

5

Bu çalışıyor:

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

Evet, ancak sonuç sayfasına yönlendirme yok.
omikron

3
bu işe $('body').append(form); $(form).submit();
yaramalı

Bu benim için en yararlı olanıydı, çünkü çok sayıda oluşturulmuş alanım var ve her biri için gizli alanlar oluşturmak istemiyorum.
Sprachprofi

Neden @Sprachprofi değil?
Displee

3

Bazıları için yararlı olabilir:

(varsa, mevcut girişler için geçersiz kılma ile bir nesne kullanarak verileri forma eklemenizi sağlayan bir işlev) [saf js]

(form bir dom eldir , jquery nesnesi değildir [ ihtiyacınız varsa 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;
}

Kullanım:

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

sen de öyle kullanabilirsin

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

siz de isterseniz # ekleyebilirsiniz ("#myformid").

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.