Add an external input value to form on submit

Question

I have a typical form:

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

and an not-inside-a-form element:

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

How do I add the value of password into the form when I submit the form?

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

Answer 1

Create a hidden field in the form and copy the password field value to that field on submit. Like this.

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

And in on submit function.

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

Answer 2

The not-yet-supported-but-HTML5-compliant way to do this "correctly" is to give your <input> element a [form] attribute:

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

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

Eventually you may be able to use this as a solution, but until more browsers support the [form] attribute, you'll have to polyfill it with JavaScript.