How to handle a form that have next and previous buttons with one submit button

Question

How to handle a form that have next and previous buttons with one submit button

1k Views Asked by Qais almomany At 10 November 2019 at 18:51

I have a pop up that have a questions for the user,when the user answer first question and click next the second question will appear and so on , I want to submit this form once the user answer all these question and click the last next button , Can i handle that with one submit button?

Original Q&A

There are 1 best solutions below

**LPGTE SOFTS** · Answer 1 · 2019-11-10T21:09:32.637000

In the following an example to show how to make a wizard, the example is limited on two views (FirstView and SecondView), it is done with Notepad and remains to test it.

Index View

@model namespace.MyModel
@{
  Layout = "~/Views/Shared/_Layout.cshtml";
}

<head>
  <script type="text/javascript">    

     $("#StartWizardButton").on("click", ShowWizard('FirstParamerValue'));      

     function ShowWizard(parameter) {      
        $.ajax({
        url: '@Url.Action("FirstViewAction", "HomeController")',
        type: "GET",
        data:{model:JSON.Parse(@Html.Raw(Json.Encode(Model)))},
        success: function (response, status, xhr) {
            $('#WizardModalContainer').html(response);
            $('#WizardModalDiv').modal({ backdrop: 'static', keyboard: false });
        },
        error: function (response) {
            alert(response.responseText);
        }
        });        
   }   

  </script>
</head>
<body>
 <button id="StartWizardButton" type="submit" data-toggle="modal">Start Wizard</button>

    ............

<div class="modal fade container" id="WizardModalDiv" tabindex="1" role="dialog" aria-hidden="true">
<div class="modal-dialog" id="Wizard-modal-dialog">
    <div class="modal-content" id="WizardModalContent">
        <div class="modal-header" id="WizardModalHeader"></div>
        <div class="modal-body" id='WizardModalContainer'>

        </div>
        <div class="modal-footer" id="WizardModalFooter">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            <button type="button" onclick="ShowWizard(); return false;" class="btn btn-primary">Next</button>
        </div>
    </div>
</div>
</div>
</body>

First View

@model namespace.FirstModel
<head>
  <script type="text/javascript">    

     $("#SecondViewWizardButton").on("click", ShowSecondView());      

     function ShowSecondView() {      
        $.ajax({
        url: '@Url.Action("SecondViewAction", "HomeController")',
        type: "GET",
        data:{model:JSON.Parse(@Html.Raw(Json.Encode(FirstModel)))},
        success: function (response, status, xhr) {
            $('#WizardModalContainer').html(response);         
        },
        error: function (response) {
            alert(response.responseText);
        }
        });        
   }   

  </script>
</head>
<body>

<button id="SecondViewWizardButton" type="submit" data-toggle="modal">Next</button>

    ............

</body>

Second View

@model namespace.SecondModel
<head>
  <script type="text/javascript">    

     $("#SecondView").on("click", ShowSecondView());      

     function ShowSecondView() {      
        $.ajax({
        url: '@Url.Action("SecondViewAction", "HomeController")',
        type: "GET",
        data:{model:JSON.Parse(@Html.Raw(Json.Encode(SecondModel)))},
        success: function (response, status, xhr) {
             $('#WizardModalDiv').modal('hide');       
        },
        error: function (response) {
            alert(response.responseText);
        }
        });        
   }   

  </script>
</head>
<body>

<button id="SecondViewWizard" type="submit" data-toggle="modal">Next</button>

    ............

</body>

The Controller

public class CommandeController : Controller
{
  public ActionResult Index()
  {
    return View("Index", MyModel);
  }

  public PartialViewResult FirstViewAction(MyModel model)
  {
    ............
    return PartialView("FirstView", FirstModel);
  }

  public PartialViewResult SecondViewAction()
  {
     ...........
     return PartialView("SecondView", SecondModel);
  }
}

Cordially

How to handle a form that have next and previous buttons with one submit button

There are 1 best solutions below

Related Questions in C#

Related Questions in ASP.NET

Related Questions in ASP.NET-MVC

Related Questions in ASP.NET-MVC-4

Related Questions in FORMWIZARD

Trending Questions

Popular # Hahtags

Popular Questions