如何在提交前添加其他字段到表单?


111

有没有一种方法可以使用javascript和JQuery添加一些其他字段,以使用POST从HTTP表单发送这些字段?

我的意思是:

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

Answers:


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

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


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

这对我最有帮助,因为我有大量的生成字段,并且我不想为每个字段创建隐藏字段。
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”)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.