how to change form on change button click?

Question

I have two json files "a.json" and "b.json". I need to show a different form when the user clicks each of the different buttons. My issue is that when I click on the first button it show the first form, but when I click on the second button it doesn't show the second form. I need to show one form at a time, i.e. when I click the second button it removes the first form and shows the second form.

  $scope.getFromAFile= function () {
      // body...
      var inputs=[];
      $http.get('a.json').success (function(data){
        var a=changeData(data);
         $scope.formFields=[]

              console.log('pp');

      console.log(data.studentName);
      console.log($scope);
      $scope.formFields = a['input'];


    }).error(function(err){
            alert(err);
        });

    }

        $scope.getFromBFile= function () {

      // body...
      $http.get('b.json').success (function(data){
        var a=changeData(data);
              console.log('pp');
 $scope.formFields=[]
      console.log(data.studentName);
      console.log($scope);
      $scope.formFields = a['input'];
    }).error(function(err){
            alert(err);
        });

    }

here is plunker http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview

Worth mentioning that you're using a directive called [angular-formly](https://github.com/nimbly/angular-) to render the form. — Gruff Bunny, Aug 12 '14 at 07:11
@NidhishKrishnan please check the json file..the form mis one field — , Aug 12 '14 at 07:39

score 3 · Accepted Answer · edited May 23 '17 at 11:45

Dont mix JQuery with AngularJs

you can use ng-click and ng-show for achieving such Task

<button ng-click="hideFormOne()">Hide Form One</button><!-- Hides Form One & Shows Form Two -->
<button ng-click="hideFormTwo()">Hide Form Two</button><!-- Hides Form Two & Shows Form One-->

<form ng-show="showFormTwo">
:
:

<form ng-show="showFormOne">
:
:

script

$scope.hideFormOne = function()
{
 $scope.showFormOne = false; // Hides Form One
 $scope.showFormTwo = true;  // Shows Form Two
}

$scope.hideFormTwo = function()
{
 $scope.showFormTwo = false; // Hides Form Two
 $scope.showFormOne = true;  // Shows Form One
}

But there is a issue that when you check json file.there is four field ,But it display only three — , Aug 12 '14 at 07:38

score 1 · Answer 2 · answered Aug 12 '14 at 06:44

1

If i understand u can use hide() function:

on document load u need hide both forms:

$('#form1').hide();
$('#form2').hide();

And on button click:

$('#button1').click(function(){
 $('#form1').show();
 $('#form2').hide();

});
$('#button2').click(function(){
 $('#form1').hide();
 $('#form2').show();

});

answered Aug 12 '14 at 06:44

Klapsius

3,273
6
33
56

If you're using AngularJS, I would recommend using the Angular directives ngHide and ngShow instead of the .hide() and .show() functions. – Andrew Sula Aug 12 '14 at 06:57

score 0 · Answer 3 · answered Aug 12 '14 at 06:54

You can have two forms, eg formA and formB.

And then if user click on formA, hide formB or click on formB then hide formA.

Example if clicked formA:

$('formA').hide();
$('formB').show();

And example if clicked formB:

$('formA').show();
$('formB').hide();

Here is Plunker Demo

how to change form on change button click?

3 Answers3