如何在提交前向表单添加其他字段？

Posted 2023-02-22

【中文标题】如何在提交前向表单添加其他字段？

【英文标题】：How to add additional fields to form before submit?

【发布时间】：2013-07-22 10:56:33

【问题描述】：

有没有办法使用 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>

【问题讨论】：

jQuery - add additional parameters on submit (NOT ajax)的可能重复

【参考方案1】：

是的。你可以尝试一些隐藏的参数。

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

【讨论】：

.appendTo(this) 可能会更好。

@jcuenod original appendTo('#form') 更好，因为这种方法允许提交另一个表单，其中包含来自该表单的值。

您必须添加一些额外的逻辑以避免每次提交时累积这些输入。

您可能需要在添加之前删除输入元素，以防它已经存在$(this).find("input[name="+"something"+"]").remove();

【参考方案2】：

试试这个：

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

【讨论】：

我需要动态添加一个文件字段。我尝试使用 type=file，并将值也作为文件（我使用的是 WebKitDirectory，所以我实际上得到了文件对象），但它似乎从未传递过它。输入文本总是被传递。请帮帮我！

我的首选答案是使用this 而不是多余的#form

【参考方案3】：

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

【参考方案4】：

您可以添加一个 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")
     
);

【讨论】：

是的，但是没有重定向到结果页面。

这应该可以：$('body').append(form); $(form).submit();

这对我最有帮助，因为我有大量生成的字段，我不想为每个字段创建隐藏字段。

【参考方案6】：

可能对某些人有用：

（允许您使用对象将数据添加到表单的功能，如果有的话，可以覆盖现有输入）[纯 js]

(form 是 dom el，而不是 jquery 对象 [jqryobj.get(0) if you need])

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

【参考方案7】：

根据 Khawer 的回答，您可以避免使用 jQuery - 为了保持一致性，例如。<input type="hidden" name="field_name" value="value" />