How To Share Input Values Across Two Forms

Question

I am working on a view that will be used to submit and preview blog entries. The relevant portion of my view looks like this:

@using (Html.BeginForm("Add"))
{
    @Html.LabelFor(m => m.Header);
    @Html.TextBoxFor(m => m.Header);

    @Html.LabelFor(m => m.HeaderSlug);
    @Html.TextBoxFor(m => m.HeaderSlug);

    @Html.LabelFor(m => m.Content);
    @Html.HiddenFor(m => m.Content)
    <pre id="code-editor"></pre>

    <button type="submit" class="flat-button">Post</button>
}

@using(Html.BeginForm("Preview"))
{

    // This form has no input fields meaning that 
    // validation will always fail because the 
    // input appears to be empty. 

    // I want this form to use the input values 
    // from the "Add" form. 

    <button type="submit" class="flat-button">Preview</button>
}

How can I share the input fields contained by the Add form with with Preview form so that they can be submitted to different controllers?

Answer 1

 @using (Html.BeginForm("Create", "Add", FormMethod.Post, new { id = "add-form" }))
 {
     @Html.LabelFor(m => m.Header);
     @Html.TextBoxFor(m => m.Header, new {@id = "header"});
     @Html.LabelFor(m => m.HeaderSlug);
     @Html.TextBoxFor(m => m.HeaderSlug, new {@id = "header-slug"});
     @Html.LabelFor(m => m.Content);
     @Html.HiddenFor(m => m.Content, new {@id = "content"})
     <pre id="code-editor"></pre>
    <button type="submit" class="flat-button">Post</button>
 }
 @using (Html.BeginForm("Create", "Add", FormMethod.Post, new { id = "add-form" }))
 {
       @Html.HiddenFor(m => m.Header, new {@id = "hidden-header"});
       @Html.HiddenFor(m => m.HeaderSlug, new {@id = "hidden-slug"});
       @Html.HiddenFor(m => m.Content, new {@id = "hidden-content"});
 }


<script>
 $(function() {
      $("#add-form").submit(function () {
           $("#hidden-header").val($("#hidden-header").val());
           $("#hidden-slug").val($("#header-slug").val());
           $("#hidden-Content").val($("#hidden-content").val());
           return true;
       });
 })

</script>