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

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

• javascript
• jquery
• forms

5 Answers 5

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

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.

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

include a hidden input element inside of the form, on the outer input's change event, assign the inner input the outer inputs value.

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

Use hidden input field inside form like this:

ex : <input type="hidden" name="pass">

When you submit the form like this :

$('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;

});