angularJs button click in form erroneously refreshing page

Question

I am trying to implement on click add a new input field.So, There are 2 buttons to add and remove input box after clicking on add button it should add a set of the input box and on clicking remove button it should remove the particular input box. But on Clicking "add" it only adds 1 input field and refreshes the whole page and the form data of that page is showing in the search bar but on the other side "remove" button works fine. Both the functions are right I guess but I don't understand what is wrong? What do I do? I don't want add button to refresh the page and showing data in the search bar. And it must add many no of input boxes after clicking on it. What needs to be done here. please help!!

Here is my code:

index.php

<form method="post">
    <div class="form-group " >
        <input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div>
        <div class="row col-md-12">
            <div class="form-group col-md-6">Start Date
                <input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date">
            </div>
            <div class="form-group col-md-6">End Date
                <input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div>
            </div>

        <div class="row col-md-12">
            <div class="form-group">
                <label for="inputPassword3" class="col-md-8 control-label">Select Store</label>
                <div class="col-md-6 c-margin-b-20">
                    <select class="form-control  c-square c-border-2px c-theme" multiple="multiple"  name="store">
                        <option value="1">All Stores</option>
                        <option value="2">Phoenix Mall</option>
                        <option value="3">1MG Mall</option>
                        <option value="4">Orion Mall</option>

                    </select>
                </div>
            </div>
            </div>

            <div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl">
                <fieldset  data-ng-repeat="choice in choices">
                    <label for="inputPassword3" class="col-md-1 control-label">Elements</label>
                    <div class="form-group col-md-3 ">
                        <input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele"> 
                    </div>
                    <label for="inputPassword3" class="col-md-1 control-label">Quantity</label>
                    <div class="form-group col-md-3" >
                        <select class="form-control  c-square c-border-2px c-theme"  name="store">
                            <option value="1">All Stores</option>
                            <option value="2">Phoenix Mall</option>
                                                   <option value="3">1MG Mall</option>
                            <option value="4">Orion Mall</option>

                        </select>
                    </div>

                    <button class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" 
                            ng-click="addNewChoice()" >
                      add
                    </button>
                    <button ng-show="$last" ng-click="removeChoice()"
                            class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" >
                      Remove
                    </button>
                </fieldset>  
            </div>   
        </div>
    </div>
    <div class="form-group">
        <input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description">
    </div>
    <input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit">

</form>

angular script

<script type="text/javascript">
var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];

$scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
};

$scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
};

});
</script>

Answer 1

The default type of a button element is submit . That is the reason your form gets submitted. In order to avoid this behaviour you can set the type to button as in the below code.

References w3.org

Reference Html Standard

 var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.choices = [{id: 'choice1'}, {id: 'choice2'}]; $scope.addNewChoice = function() { var newItemNo = $scope.choices.length+1; $scope.choices.push({'id':'choice'+newItemNo}); }; $scope.removeChoice = function() { var lastItem = $scope.choices.length-1; $scope.choices.splice(lastItem); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form method="post"> <div class="form-group " > <input type="text" placeholder="Campaign Name" class="form-control c-square c-theme input-lg" name="camp_name"> </div> <div class="row col-md-12"> <div class="form-group col-md-6">Start Date <input type="date" placeholder="start date" class="form-control c-square c-theme input-lg" name="start_date"> </div> <div class="form-group col-md-6">End Date <input type="date" placeholder="end date" class="form-control c-square c-theme input-lg" name="end_date"> </div> </div> <div class="row col-md-12"> <div class="form-group"> <label for="inputPassword3" class="col-md-8 control-label">Select Store</label> <div class="col-md-6 c-margin-b-20"> <select class="form-control c-square c-border-2px c-theme" multiple="multiple" name="store"> <option value="1">All Stores</option> <option value="2">Phoenix Mall</option> <option value="3">1MG Mall</option> <option value="4">Orion Mall</option> </select> </div> </div> </div> <div class="row col-md-12" ng-app="angularjs-starter" ng-controller="MainCtrl"> <fieldset data-ng-repeat="choice in choices"> <label for="inputPassword3" class="col-md-1 control-label">Elements</label> <div class="form-group col-md-3 "> <input type="text" placeholder="Campaign Name" ng-model="choice.name" class="form-control c-square c-theme input-lg" name="ele"> </div> <label for="inputPassword3" class="col-md-1 control-label">Quantity</label> <div class="form-group col-md-3" > <select class="form-control c-square c-border-2px c-theme" name="store"> <option value="1">All Stores</option> <option value="2">Phoenix Mall</option> <option value="3">1MG Mall</option> <option value="4">Orion Mall</option> </select> </div> <button type="button" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" ng-click="addNewChoice()" > add </button> <button type="button" ng-show="$last" ng-click="removeChoice()" class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" > Remove </button> </fieldset> </div> </div> </div> <div class="form-group"> <input type="text" placeholder="Description" class="form-control c-square c-theme input-lg" name="description"> </div> <input class="btn c-theme-btn c-btn-uppercase btn-lg c-btn-bold c-btn-square" value="Submit" type="submit"> </form> 

Hope this helps :)