Pass data from one form to another on same page before submit

Question

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.

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

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.

Here is some sample code.

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    <div id="formGroup1" class="form-group">
        @Html.LabelFor(m => m.Gender, new { @id = "genderLabel" })
        <div class="">
        @Html.EnumDropDownListFor(m => m.Gender, new {@id = "genderId", @class = "selectpicker form-control" })
        </div>
    </div>
    // other fields here
}
@using (Html.BeginForm("ExternalLogin", "Account", FormMethod.Post, new { ReturnUrl = Model.ReturnUrl, @id = "registerForm", role = "form", style = "margin-left: 20px" })) 
{
    <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"><i class="fa fa-facebook" style="color: white"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Connect</button>
}

Do not use 2 forms. Use one form with 2 buttons with the same name attribute and different value attributes. Then post to one method with a parameter from the button name and perform your logic based on the clicked button — user3559349
I don't think this will work because I'm doing lots of validation on the first form, and the second form needs no validation. If I have two buttons in 1 form regardless of which button I pres I'll still have to validate all teh fields. All I need in the second form is 1 enum value from the first. — user1186050
Well that's not what you question indicates :). Then you need to include a hidden input in the second form and handle the second submit button to get the value(s) from the first form and update the inputs in the 2nd form. — user3559349
I was thinking I could create a hidden field in the second form and on enum onChange() in the first form I can set the hidden value in teh second form? — user1186050

Mohit Shah Mohit Shah · Accepted Answer · 2016-03-12T06:01:22

This Works Perfectly and does what you want

Controller Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Temp.Models;

namespace Temp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public void Register(MyModel mymodel)
        {

        }

        [HttpPost]
        public void ExternalLogin(int mygender)
        {

        }
    }
}

Model Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Temp.Models
{
    public class MyModel
    {
        public enum Gender { Male = 1, Female = 2 }

        public Gender gender { get; set; }
    }
}

View Code

@model Temp.Models.MyModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function OnChange()
    {
        $("#mygender").val($("#genderId").val())    
    }

</script>

@using (Html.BeginForm("Register", "Home", FormMethod.Post, new { @class = "form-horizontal", @id = "registerForm", role = "form", style = "margin-left: 20px" }))
{
    <div id="formGroup1" class="form-group">
        @Html.LabelFor(m => m.gender, new { @id = "genderLabel" })
        <div class="">
            @Html.EnumDropDownListFor(m => m.gender, new { @id = "genderId", @class = "selectpicker form-control",@onchange="javascript:OnChange();" })
        </div>
    </div>
    <button type="submit" class="btn btn-default btn-lg">Connect</button>

}

@using (Html.BeginForm("ExternalLogin", "Home", FormMethod.Post, new { @id = "registerForm", role = "form", style = "margin-left: 20px" }))
{
    <input type="hidden" id="mygender" name="mygender"/>
    <button type="submit" class="btn btn-default btn-lg">Connect</button>
}

Pass data from one form to another on same page before submit

1 Answers