passing Id between multiple forms in angularjs

Question

There is three forms in same Html. In the first form there is a radio button. If one button got selected the second form will be appear. In the second form there is a button. If that button clicked third form will be appear, in this form i need to show the id and the name which was selected in first form. How can i do that?

Html

  <form name="firstform">
     <table class="table">
    <tr>
    <th>Select</th>
    <th>Name</th></tr>
     <tr ng:repeat="d in dList">
    <td><input type="radio" ng-click="Selected(d.Id)" name="Selection" /></td>
    <td>{{d.Name}}</td></tr>
    </table>
    </form>

    <form name="secondform">
     <table class="table">
    <td>racename</td>
      <td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="savedetails()" /></td>
  </tr>
     </table>
     </form>

     <form name="thirdform">
     <table class="table">
    <tr>
    <td>id</td>
      <td>name</td></tr>
    <tr><td>{{Id}}</td>
    <td>{{name}}</td></tr>
     </table>
    </form>

angular Controller

     $scope.Selected = function (id, name) {
            $scope.firstform= false;
            $scope.secondform= true;
            console.log(id);  
        }
  $scope.savedetails= function () {
            $scope.firstform= false;
            $scope.secondform= false;
            $scope.thirdform= false;

        }

If you use same controller the ID will be persist. Please create a fiddle — selvakumar
– selvakumar, Commented Jun 21, 2017 at 5:15
$scope.1st form, what is that space between 1st and form? it should change to 1st_form — Maher
– Maher, Commented Jun 21, 2017 at 5:18

Maher · Accepted Answer · 2017-06-21 05:44:48Z

1

As you see we can use some condition in our HTML with ng-if or ng-show and ng-hide.

The different between ng-if and ng-hide is when you try to use ng-if you can't get the form name because the element not exist.

var app = angular.module("app", []);

app.controller("ctrl", ["$scope", function($scope) {
  $scope.form = {}

  $scope.options = [{
      id: 01,
      name: "option 1",
      value: 1
    },
    {
      id: 02,
      name: "option 2",
      value: 2
    }
  ]

  $scope.saveDetails = function() {
    $scope.thirdformDisplay = true;
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

    <form name="firstform">
        <h1>form 1</h1>

        <div ng-repeat="option in options">
            <label>{{option.name}}</label>
            <input type="radio" ng-model="form.optionFormValue" ng-value="option.value" ng-click="form.optionFormId = option.id" name="Selection" />
        </div>

        <button ng-click="form = {};thirdform = false;">clear form 1</button>
    </form>

    <form name="secondform" ng-show="form.optionFormValue">
        <h1>form 2</h1>
        <label>form 1 details:</label>
        <ul>
            <li>form name: {{firstform.$name}}</li>
            <li>form option value: {{form.optionForm}}</li>
            <li>form option value: {{form.optionFormId}}</li>
        </ul>
        <br />
        <input type="submit" value="Continue" ng-click="saveDetails()" />
    </form>

    <form name="thirdform" ng-show="thirdformDisplay">
        <h1>form 3</h1>

        <ul>
            <li>form 1 name: {{firstform.$name}}</li>
            <li>form 2 name: {{secondform.$name}}</li>
        </ul>
    </form>
</div>

edited Jun 21, 2017 at 5:44

answered Jun 21, 2017 at 5:31

Maher

2,5471 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manojkanth Over a year ago

Maher how can i pass that selected id to the controller? bcz i got the task that i need to show the details in thirdfrm, according to the selected id in the first form. that was my mistake i didnt mentioned in the question. Your answer is correct according to asked question. Can u plz help me to finish the task.

Maher Over a year ago

@ManojKanth, as you see {{form.optionFormId}} is your selected id, so you can get it by $scope.form.optionFormId in the controller.

Maher Over a year ago

@ManojKanth, welcome my friend, tell me if you can't handle it

Srinivas ML · Accepted Answer · 2017-06-21 05:54:31Z

Since ngRepeat is isolated scope , you can use ControllerAs to set values in controller from inside ngRepeat.

      <body ng-controller="MainCtrl as main">
    <form name="firstform">
     <table class="table">
    <tr>
    <th>Select</th>
    <th>Name</th></tr>
     <tr ng-repeat="d in main.dList">
    <td><input type="radio" ng-click="main.selectItem(d)" name="Selection" >{{d.value}}</input></td>
    <td>{{d.Name}}</td></tr>
    </table>
    </form>

    <form name="secondform">
     <table class="table">
    <td>racename</td>
      <td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="main.savedetails()" /></td>
  </tr>
     </table>
     </form>

     <form name="thirdform" ng-show="main.showForm">
     <table class="table">
    <tr>
    <td>id</td>
      <td>name</td></tr>
    <tr><td>{{main.selected.id}}</td>
    <td>{{main.selected.value}}</td></tr>
     </table>
    </form>
  </body>

And Controller as below

   app.controller('MainCtrl', function($scope) {
  this.dList = [{
    id: 1,
    value: "a"
  }, {
    id: 2,
    value: "b"
  }, {
    id: 3,
    value: "c"
  }];

  this.savedetails=function(){
    this.showForm=true;

  };

  this.selectItem=function(item){
    this.selected=item
  }
});

Please check this below plunker

https://plnkr.co/edit/WGgUeO76A2VzQNVnBicb?p=preview

Md Hasan Ibrahim · Accepted Answer · 2017-06-21 05:58:49Z

1

You can find the selected Id value of the first form in the controller by using $scope.form.firstFormSelectedValue in the following way:

<form name="1st form">
         <table class="table">
        <tr>
        <th>Select</th>
        <th>Name</th></tr>
         <tr ng:repeat="d in dList">
        <td><input type="radio" ng-model="form.firstFormSelectedValue" ng-click="Selected(d.Id)" name="Selection" ng-attr-value="{{d.Id}}" /></td>
        <td>{{d.Name}}</td></tr>
        </table>
     </form>
    <form name="secondform" ng-show="form.optionFormValue">
        <h1>form 2</h1>
        <label>form 1 details:</label>
        <ul>
          <li>form name: {{firstform.$name}}</li>
          <li>form option value: {{form.optionForm}}</li>
          <li>form option value: {{form.optionFormId}}</li>
       </ul>
       <br />
       <input type="submit" value="Continue" ng-click="saveDetails()" />
  </form>

  <form name="thirdform" ng-show="thirdformDisplay">
    <h1>form 3</h1>

    <ul>
        <li>form 1 name: {{firstform.$name}}</li>
        <li>form 2 name: {{secondform.$name}}</li>
        <li>form 1 Id: {{form.firstFormSelectedValue}}</li>
    </ul>
  </form>

edited Jun 21, 2017 at 5:58

answered Jun 21, 2017 at 5:16

Md Hasan Ibrahim

1,90819 silver badges28 bronze badges

1 Comment

Manojkanth Over a year ago

since am new to angular. can u show how can i get that id in the third form?

Collectives™ on Stack Overflow

passing Id between multiple forms in angularjs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related