CODEWITHSUNDEEP
javascriptjqueryangularjsformsangularjs-scope
Jaskaran Singh Puri
Jaskaran Singh Puri

Reputation: 739

angularjs submit button not working

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!

Upvotes: 1

Views: 1097

Answers (1)

ngCoder
ngCoder

Reputation: 2105

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.

Upvotes: 2

Related Questions