Send two forms with one button and than redirect to third action

Question

Is it possible to submit simultaneously 2 forms to different actions? In the actions I want to set TempData and than redirect to third action.

I tried method described here Submit two forms with one button Let's suggest that each form have one input field. First form with "name" input, second with "lastname" input

    submitForms = function(){
        document.forms["formForFirstAction"].submit();
        document.forms["formForSecondAction"].submit();
        window.location("/Home/ThirdAction")
    }

My Actions looks like...

    [HttpPost]        
    public void FirstAction(string name) {
        TempData["name"] = name;
    }
    [HttpPost]
    public void SecondAction(string lastname) {
        TempData["lastname"]=lastname;
    }
    public ActionResult ThirdAction () {
        string fullname;
        fullname = string.Format((string)TempData["name"] + 
        (string)TempData["lastname"]);
        return View(fullname);
     }

But it doesn't work. In most cases I got only name or last name in fullname string. Looks like it's something with async or other things I don't know much now. Can you please help me?

You can't send multiple forms because you'll lose control after the first one submits. You can do an AJAX post though. — Dave, Sep 22 '16 at 15:37

Shyju · Accepted Answer · 2016-09-22T15:48:24.637

TempData is available only the next immediate request. That is the reason you are getting only one item (the last one set from one of those 2 action methods) from the temp data dictionary. You should consider using another persistence mechanism like Session /database

Also, Instead of submitting the form, you oshould consider ajax

submitForms = function(){
   $.post("@Url.Action("FirstAction")",$("#formForFirstAction").serialize());
   $.post("@Url.Action("SecondAction")",$("#formForSecondAction").serialize());
   window.location("/Home/ThirdAction")
}

and here is an example using Session to persist data

[HttpPost]
public void SecondAction(string lastname) {
    Session["lastname"]=lastname;
}
public ActionResult ThirdAction () {
    string fullname;
    fullname = string.Format((string)Session["name"] + 
    (string)Session["lastname"]);
    return View(fullname);
}

You may also consider using jquery when() or q.all to make sure that you are redirecting only after the ajax call's are done ( to avoid the callback hell)

Thanks for reply. But I have one question. What if SecondAction or FirstAction have complex logic and CPU take time to calculate it and assign Session? Will js script wait until it done or it'll activate redirection? EDIT: Thanks for edited answer. I got it. — PilgrimViis, Sep 22 '16 at 15:48
No. You should use jQuery `when` to do that. or executing the redirect in the post method's callback (not a good approach since you have 2 ajax calls! Callback hell problem). See the updated answer — Shyju, Sep 22 '16 at 15:50

score 1 · Answer 2 · edited May 23 '17 at 10:27

Solution 1 : Use AJAX Form submissions.

Solution 2: Create All in one form in hidden and submit.You can implement this static. In every submit button click you have to read data from form1 and form2 and update those to form hidden and submit it.

Solution 3: Dynamic Hidden form creation and submission. Integrate everything in to dynamically created form and submit on the fly.

Dynamic for creation examples

How to create a form dynamically using JavaScript?

Plain JS approach
my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='http://www.another_page.com/index.htm';

my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name='myInput';
my_tb.value='Values of my Input';
my_form.appendChild(my_tb);

my_tb=document.createElement('INPUT');
my_tb.type='HIDDEN';
my_tb.name='hidden1';
my_tb.value='Values of my hidden1';
my_form.appendChild(my_tb);
document.body.appendChild(my_form);
my_form.submit();

JQuery Approach

Dynamically create and submit form

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

Send two forms with one button and than redirect to third action

2 Answers2