在提交时向表单添加外部输入值答案

【问题标题】：Add an external input value to form on submit在提交时向表单添加外部输入值
【发布时间】：2012-08-27 04:37:08
【问题描述】：

我有一个典型的形式：

<form action="" accept-charset="utf-8" method="post">
    <textarea name="content"></textarea>
</form>

还有一个非表单元素：

<input type="password" name="password">

提交表单时如何在表单中添加密码值？

$('form').submit(function(){
   //hmmm
});

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

在表单中创建一个隐藏字段，并在提交时将密码字段值复制到该字段。像这样。

<form action="" accept-charset="utf-8" method="post">
    <textarea name="content"></textarea>
    <input type="hidden" name="password" id="ps">
</form>

<input type="password" name="password" id="ps1">

并在提交功能中。

$('form').submit(function(){
   $('input#ps').val($('input#ps1').val());
   return true;
});

【讨论】：

啊，我怎么没想到。谢谢！
有没有办法增加更多的字段？
@coder771 是的，您可以在返回之前添加任何字段。
@coder771 你可以随意添加许多隐藏的输入字段

【解决方案2】：

“正确”执行此操作的尚不支持但符合 HTML5 的方法是为您的 <input> 元素提供 [form] attribute：

<form id="foo">
    ...stuff...
</form>

<input type="password" id="bar" form="foo" />

最终，您也许可以将其用作解决方案，但在更多浏览器支持 [form] 属性之前，您必须使用 JavaScript 对其进行 polyfill。

【讨论】：

技术上没有浏览器支持它？
@Severus，我相信有些浏览器支持它，但我没有检查，也找不到任何兼容性表。它甚至还没有在caniuse 上列出，所以我认为浏览器支持充其量只是粗略的。幸运的是，这种交互很容易用 JS 填充。
有没有增加更多字段的方法
@coder771，我不确定我是否理解您的要求，我鼓励您使用页面顶部的“提问”按钮形成要问的问题。
@coder771, ...所以将[form] 属性也添加到另一个字段。

【解决方案3】：

$('form').submit(function(){
   var password = $('input[type="password"]');
   password.appendTo($(this));
   //or $(this).append(password);
});

【讨论】：

【解决方案4】：

在表单中包含一个隐藏的输入元素，在外部输入的更改事件上，为内部输入分配外部输入值。

<form action="" accept-charset="utf-8" method="post">
    <textarea name="content"></textarea>
    <input type="hidden" id="inner" />
</form>
<input type="password" name="password" >


<script type="text/javascript">
    $(function(){
        $('#outer').change(function(){
            $('#inner').val($(this).val());
        });
    });
</script>

【讨论】：

【解决方案5】：

在表单内使用隐藏的输入字段，如下所示：

例如：<input type="hidden" name="pass">

当您像这样提交表单时：

$('form').submit(function(){
 <!-- Save the value of password into the hidden field
  Note : Password here should just be one field in that page -->
 $('input[name="pass"]').val($('input[type="password"]').val());
 return true;

});

【讨论】：