CODEWITHSUNDEEP
javascripthtmlangularjsforms
Kahsn
Kahsn

Reputation: 1045

showing only certain form at a time in single-page web app

I have a single-page web app containing multiple forms. Depends on what user clicks between two buttons("next step" or "previous step"), I want to show different steps. Let's say I see a form corresponding to step 1. If I click a "next step" button, I want to see a form corresponding to step 2.

I have index.html code like following:

<form name="form" novalidate ng-submit="submitStep1()" ng-show="step == 1">
  //multiple inputs
</form>

<form name="form" novalidate ng-show="step == 2">
  //multiple inputs
</form>

submitStep1 function is like following:

  $scope.submitStep1 = function () {
    if ($scope.form.$valid) {
      $scope.step = 2;
    }
  };

Whenever submit button gets clicked, I increase step number. The problem is that I'm trying to add 2 buttons as I explained above so I can either increase or decrease step number. However, it seems like ng-submit can only take one function(meaning that even if I add 2 buttons, only one function will be triggered). What would be the solution for this?

Upvotes: 0

Views: 77

Answers (2)

Hassan Tariq
Hassan Tariq

Reputation: 740

You can make next button at the end of your form tag 

<form name="form" novalidate ng-submit="submitStep1()" ng-show="step == 1">
   //multiple inputs
</form>

<form name="form" novalidate ng-show="step == 2">
    //multiple inputs
</form>
<input type="button" ng-click="movenext()"/>
<input type="button" ng-click="moveprevious()"/>

Handle your switching between form code in this button and assign different form name to each of forms

Upvotes: 0

RGA
RGA

Reputation: 313

If you have 2 buttons then you must have different function for each button,

var count=1;

function nextStep(){
count=count++;
}

function previousStep(){
count=count--;
}

In your html, bind these functions to each function

<button class="btn btn-primary" ng-click="previousStep()">Previous</button>
<button class="btn btn-primary" ng-click="nextStep()">Next</button>

Upvotes: 1

Related Questions