javascript - Angular button is calling form submit button for unknown reason - Stack Overflow

admin管理员组

文章数量:1402840

I am using Laravel, which uses blade, and I have a view with a form in it. I am using blade to open and close the form and in the form I am also using angular to update parts of the form as the user interacts with it. I have a button in the form which triggers a angular controller method but once the controller method gets run the form submit action gets triggered. I don't understand why the form is being submitted when I click on the angular button. Can you help?

Here is my Html (with blade):

{!! Form::open([$category = new \App\Category, 'url' => 'categories']) !!}
<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(data.singleSelect)">

    </select><br>
    <button ng-click="upOneLevel()">back</button>



    <tt>singleSelect = <%data.singleSelect%> </tt>

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

and here is my angular controller:

function catController ($scope, mentFactory) {
    $scope.data = {
    singleSelect: null,
   };

   $scope.grandParentId = null;

   $scope.change = function ($parentId) {
    $scope.grandParentId = $scope.selectOptions[$parentId - 1].parent_id;
    mentFactory.get($parentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
   };

   $scope.upOneLevel = function() {
      mentFactory.get($scope.grandParentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
      $scope.grandParentId = $scope.selectOptions[$scope.grandParentId - 1].parent_id;
   };

   mentFactory.get(null)
        .success(function(data) {
            $scope.selectOptions = data;
        });
}

When I click on the button with the ng-click directive once upOneLevel is executed, the form gets submitted.

I am using Laravel, which uses blade, and I have a view with a form in it. I am using blade to open and close the form and in the form I am also using angular to update parts of the form as the user interacts with it. I have a button in the form which triggers a angular controller method but once the controller method gets run the form submit action gets triggered. I don't understand why the form is being submitted when I click on the angular button. Can you help?

Here is my Html (with blade):

{!! Form::open([$category = new \App\Category, 'url' => 'categories']) !!}
<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(data.singleSelect)">

    </select><br>
    <button ng-click="upOneLevel()">back</button>



    <tt>singleSelect = <%data.singleSelect%> </tt>

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

and here is my angular controller:

function catController ($scope, mentFactory) {
    $scope.data = {
    singleSelect: null,
   };

   $scope.grandParentId = null;

   $scope.change = function ($parentId) {
    $scope.grandParentId = $scope.selectOptions[$parentId - 1].parent_id;
    mentFactory.get($parentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
   };

   $scope.upOneLevel = function() {
      mentFactory.get($scope.grandParentId)
        .success(function(data) {
            $scope.selectOptions = data;
        });
      $scope.grandParentId = $scope.selectOptions[$scope.grandParentId - 1].parent_id;
   };

   mentFactory.get(null)
        .success(function(data) {
            $scope.selectOptions = data;
        });
}

When I click on the button with the ng-click directive once upOneLevel is executed, the form gets submitted.

• javascript
• angularjs
• forms
• laravel-5.1
• laravel-blade

Share Improve this question Follow edited Jan 12, 2016 at 11:40 Will Vousden 33.4k99 gold badges8888 silver badges9797 bronze badges asked Jan 12, 2016 at 11:21 user3494047user3494047 1,69344 gold badges3636 silver badges6262 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use <input type="button"/> instead of button tag. <button> will implicitly submit the form.

So instead of

<button ng-click="upOneLevel()">back</button>

try

<input type="button" value="back" ng-click="upOneLevel()"/>

Just to clarify, the default behavior of a <button> with no type attribute is to submit the form. To get it to be just a plain button without submitting just add type="button" like so:

<button type="button" ng-click="upOneLevel()">back</button>

本文标签： javascriptAngular button is calling form submit button for unknown reasonStack Overflow