111

Есть ли способ использовать javascript и JQuery для добавления дополнительных полей для отправки из HTTP-формы с помощью POST?

Я имею в виду:

<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 Призрак
источник

2

возможный дубликат jQuery - добавьте дополнительные параметры при отправке (НЕ ajax)

Marijn

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

К. Видж,

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+'" />');

de_nuit
источник

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

3

это должно сработать: $('body').append(form); $(form).submit();

Джефф Лоури,

Это было для меня наиболее полезным, потому что у меня есть большое количество сгенерированных полей, и я не хочу создавать скрытые поля для каждого из них.

Sprachprofi,

Почему не @Sprachprofi?

Displee

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").

Мохамед Аллал
источник

Как добавить дополнительные поля в форму перед отправкой?

Ответы:

Использование: