Pass data from one form to another on same page before submit
<p>I have two forms on one page.
In my first form I have all the field data (name, username, password, etc). In my second form I just have a button. Both forms on submission go to different actions in my controller. </p>

<p><strong><em>Problem</em></strong> - when I submit form 2 from buton click, any fields from form 1 don't get passed to the controller via ViewModel. Ex. The action "ExternalLogin" doesn't get the "Gender" field value</p>

<p>How can I pass "Gender" from the first form to my second form before I submit the second form? JQuery? I tried putting HTML.HiddenFor(m => m.Gender) in my second form, but that didn't work.</p>

<p>Here is some sample code.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    &lt;div id="formGroup1" class="form-group"&gt;
        @Html.LabelFor(m =&gt; m.Gender, new { @id = "genderLabel" })
        &lt;div class=""&gt;
        @Html.EnumDropDownListFor(m =&gt; m.Gender, new {@id = "genderId", @class = "selectpicker form-control" })
        &lt;/div&gt;
    &lt;/div&gt;
    // other fields here
}
@using (Html.BeginForm("ExternalLogin", "Account", FormMethod.Post, new { ReturnUrl = Model.ReturnUrl, @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    &lt;button type="submit" class="btn btn-default btn-lg" id="facebookButton" name="provider" value="Facebook" title="Log in using your Facebook account" style="width: 280px; color: white; background-color: #4c7bd9"&gt;&lt;i class="fa fa-facebook" style="color: white"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Connect&lt;/button&gt;
}</code></pre>
</div>
</div>
</p>