Summer Sale! All accounts are 50% off this week.

jeloqim's avatar

Angular button calling form submit button

Hi, I am have a view with a form and I am using angularjs to update drop downs on part of the form. The form looks like this:

@section('scripts')
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    <script type="text/javascript" src="/js/categoryApp.js"></script>
    @stop
    <div class="container" ng-app="catApp" ng-controller="catController">
        <div class="form-group">
            {!! Form::label('name', 'Name:') !!}
            {!! Form::text('name', null, ['class' => 'form-control']) !!}
        </div>

        <div class="form-group">
            {!! Form::label('category_parent', 'Parent Category:') !!}
            {!! Form::select('category_parent', $categories, null, ['id' => 'category_list', 'class' => 'form-control']) !!}
        </div>

        <label for="singleSelect"> Single select: </label><br>
        <select name="singleSelect" ng-model="data.singleSelect" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change()">
      
        </select><br>

   
        <button ng-click="forceUnknownOption()">Force unknown option</button><br>
        <tt>singleSelect = </tt>

        <div class="form-group">
            {!! Form::submit($submitButtonText, ['class' => 'btn btn-primary form-control']) !!}    
        </div>
    </div>

and my angular app looks like this:

var app = angular.module('catApp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

function catController ($scope, commentFactory) {
    $scope.data = {
    singleSelect: null,
    multipleSelect: [],
    option1: 'option-1',
   };
   $scope.change = function () {
    $scope.selectOptions = [{name : "new category", id : 10}];
   };
   
   $scope.selectOptions =commentFactory.get();
   
   $scope.categories = commentFactory.get();

   $scope.forceUnknownOption = function() {
     $scope.data.singleSelect = 'nonsense';
   };
}

My question is: how come when I click on the button my submit button is triggered?

Every time i click on the force unknown button the action that the submit button is supposed to trigger gets triggered and I dont understand why.

0 likes
0 replies

Please or to participate in this conversation.