0

I have a project in which I have to submit 3 different forms using one Submit Button

I have a view in which I Have three tabs with 3 different forms and I want to submit all forms with a one submit button.

the submit button is in the first form.

I am using Asp.net MVC 4

<!-- tabs -->
<div class="sky-tabs ">

    <input type="radio" name="sky-tabs" checked id="sky-tab1" class="sky-tab-content-1">
    <label id="form1" for="sky-tab1"><span><span><i class="fa fa-arrow-down"></i>form1</span></span></label>

    <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
        <label for="sky-tab2"><span><span><i class="fa fa-picture-o"></i>form2</span></span></label>

        <input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3">
        <label for="sky-tab3"><span><span><i class="fa fa-cogs"></i>form3</span></span></label>

        <input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4">
        <label for="sky-tab4"><span><span><i class="fa fa-globe"></i>Newton</span></span></label>

    <ul>

        <li class="sky-tab-content-1">
            @using (Html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new { @class = "sky-form", role = "form" }))
            {
                @Html.Partial("form1")
            }
        </li>

        <li class="sky-tab-content-2">
            @using (Html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new { @class = "sky-form", role = "form" }))
            {
                @Html.Partial("Form2")
            }
        </li>

        <li class="sky-tab-content-3">
            @using (Html.BeginForm("AddNewClient", "Admin", FormMethod.Post, new { @class = "sky-form", role = "form" }))
            {
                @Html.Partial("form3")
            }
        </li>

        <li class="sky-tab-content-4">

        </li>

    </ul>

</div>
<!--/ tabs -->
Kishan Patel
  • 778
  • 11
  • 26
Tyson
  • 61
  • 9
  • you can do using javascript or jquery add onclick function to submit button and inside that function submit all forms. This will help you https://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button – Waseem Ansar Dec 17 '19 at 06:51
  • ok but how can i handle Files. In all Forms I have 2 or 3 Files to upload on server. – Tyson Dec 17 '19 at 06:54
  • All form data will be submitted same way normally when we submit a form. with javascript or jquery you will only trigger form submission. – Waseem Ansar Dec 17 '19 at 06:58
  • @Tyson [this](https://stackoverflow.com/questions/15788806/asp-net-mvc-4-multiple-post-via-different-forms) StackOverflow link may be useful – Deepak Dec 17 '19 at 07:09
  • Thanks All I got a solution. So all my 3 Forms are in a Same View Instead of 3 forms I make A big Form send all data to same action and save data to database. – Tyson Dec 19 '19 at 07:45

2 Answers2

0

Submit the forms using Jquery, bellow is a sample

HTML

<form id="form1">
    <input>
    <input type="submit" id="submit">
</form>
<form id="form2">
    <input>
</form>

<form id="form3">
    <input>
</form>

Js

<script type="text/javascript">
    $(document).ready(function () {
        $('#form1 #submit').click(function () {
            $('#form1, #form2, #form3').submit();
        });
    });
</script>

Remember to include jquery library

Stack
  • 11
  • 6
0

This is only possible when the forms are set to update via ajax,otherwise the submission of one will prevent the other from being submitted.

bulbul bd
  • 166
  • 1
  • 1
  • 9