angularjs submit button not working

Question

I'm validating & submitting a simple form using angularjs, the form seems to do some initial validation but the submit button does not log or executes the angular function defined to it. What am I doing wrong?

Main app.js

var quora=angular.module("quora-app",['q-controller-1','ngRoute']);
quora.config(function ($routeProvider) {
    $routeProvider
        .when('/edit',{
            templateUrl:'../resources/views/forms/edit.blade.php',
            controller:'q-master-1'
        });
});

Controller

angular.module("q-controller-1",[])
    .controller("q-master-1",['$scope',function ($scope) {
        $scope.update=function(value,text) {
            $scope.id=value;
            $scope.putText=text;
        }
        $scope.validate=function(updateInfo) {
            console.log(updateInfo);
            if($scope.update.$valid) {
                $scope.test1=$scope.id
                $scope.test2=$scope.updateInfo.qText
            }
            else
                console.log("no")
        }
    }]);

edit.blade.php

<form name="update" method="POST" action="edit.blade.php" ng-submit="validate(updateInfo);" onsubmit="return false;" >
    <b ng-show="update.question.$dirty && update.question.$error.required">Invalid</b>
    <input type="text" name="question" ng-required="true" ng-minlength="3" ng-value="putText" ng-model="updateInfo.qText">
    <input type="submit" name="submit" value="Update" ng-show="update.$valid">
</form>

File where execution initiates

@{{ test1 }}
@{{ test2 }}
@section('list-questions-answers')
    <div ng-view></div>
    <ul>
        @foreach($listQuestionsAnswers as $q)
            <li>
                <a href="{{url('/questions/'.$q->question_id)}}">{{ $q->question }}</a>
                Options: <a href="#edit" ng-click="update({{ $q->question_id }},'{{ $q->question }}')">Edit</a>
            </li>
            @foreach($q->answers as $a)
                <ul>
                    <li>{{ $a->answer }}</li>
                </ul>
            @endforeach
        @endforeach
    </ul>
@endsection

The ng-view is being loaded, but the submit button is not working or logging anything!

then it will submit like a normal form, which is of no use ! — Jaskaran Singh Puri
– Jaskaran Singh Puri, Commented Oct 31, 2016 at 7:21
You can do one thing don't go for native approach . Instead remove ng-submit and on submit , action post and all that , and just add ng-click to the submit button and use ng-disabled to disable submit button until the form is valid like you are doing now — ngCoder
– ngCoder, Commented Oct 31, 2016 at 7:24
I suspect the culprit is your action attribute which is trying to do a post call which is out of Angular context , try removing that you don't need such native things when working with Angular — ngCoder
– ngCoder, Commented Oct 31, 2016 at 7:49

ngCoder · Accepted Answer · 2016-11-01 07:10:32Z

2

As mentioned in comments the issue was with action attribute in the form tags as it works well with the native forms but when working with Angular that behaviour doesn't comply.

As angular is trying to call the ng-submit function but the action method is trying to process the request URL.

Alternative approach:

Instead remove ng-submit and on submit , action post and all that , and just add ng-click to the submit button and use ng-disabled to disable submit button until the form is valid.

answered Nov 1, 2016 at 7:10

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

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

1 Comment

ngCoder Over a year ago

@Jaskaran can you accept this as answer,it would help others also!

Collectives™ on Stack Overflow

angularjs submit button not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related