javascript - 在提交时向表单添加外部输入值

Question

我有一个典型的形式：

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

和一个 not-inside-a-form 元素：

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

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

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

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

Answer 2

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

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

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

最终你可能会使用它作为解决方案，但在更多浏览器支持该[form]属性之前，你必须使用 JavaScript 来填充它。

Answer 3

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

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

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

});