ng-submit in angularJs is not working

Question

I am relatively new in angularJs. I am working with a search field where search will execute with the "ng-submit", but ng-submit is not working. Here is my template (only the search portion):

<form class="navbar-form navbar-right" ng-submit="search()">
    <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
</form>

and the associated angularJS

<script>
app.controller("NavCtrl", ['$scope', '$http', '$location', '$q','$timeout', function NavCtrl($scope, $http, $location, $q, $timeout) {
    $scope.results = ["Test"];
    $scope.term = "";
    $scope.reqs = "5";
    $scope.pics = "45";
    $scope.ddata = "asdasd";
    $scope.ddata = $http.post("{% url 'get-nav-info' %}").success(
        function(result){
            //$scope.reqs = result.data.data.num_request;
            //$scope.pics = result.data.data.num_photo;
            return result.data;
        }
    );
    //$scope.reqs = $scope.ddata.num_request;
    //$scope.pics = $scope.ddata.num_photo;


    $scope.search = function(){
        //alert("test");
        //$location.absUrl()
        //$location.path("{% url 'search-term-show' %}?term="+$scope.term).replace();
        $http.get("{% url 'search-term-show' %}?term="+$scope.term).success(function(result){
                return result.data;
        });
    //$scope.$apply();
    }
}]);

</script>

I am pretty sure the problem is occurring in the angularJs ng-submit portion. But can't fix it out properly. I am pretty sure because if I manually write the url for search then it shows results but if I try to search the result by pressing enter the search gives no response. Please help me to fix this problem.

pfried · Accepted Answer · 2015-04-22 08:51:17Z

Well there is a lot of useless code up there, but i created a plunker

http://plnkr.co/edit/uwDrNRLxUBLQdoi2ykez?p=preview

EDIT: SORRY posted wrong link!

which gives some advice, maybe you forgot to attach the controller to your html like ng-controller="navController"

var app = angular.module('myApp', []);

app.controller('navController', ['$scope', '$http', function($scope, $http) {
  
  $scope.search = function() {
      console.log("search")
      $http.get($scope.term).success(function(result) {
         window.console.log("result");
         return result.data;
      });
  
  }
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
    <script src="script.js"></script>
 <body ng-app="myApp">
   <div ng-controller="navController">
      <form ng-submit="search()">
          <input class="form-control col-lg-8" type="text" placeholder="Search" ng-model="term"></input>
          <input type="submit">
      </form>
    </div>
  </body>
<html>

On submit it does the search, but i cannot tell what that url is because u used some kind of template mixin, please avoid mixing template and Javascript

sameerdube · Accepted Answer · 2014-01-03 12:15:58Z

0

Have you put id="anyName" to tag?

If so it should work

Thanks, Sameer

answered Jan 3, 2014 at 12:15

sameerdube

3793 silver badges10 bronze badges

Comments

frekele · Accepted Answer · 2014-06-21 01:00:38Z

0

You can try to insert into the 'form' with type = "submit" button to the action and leaves it hidden. this eg:

<button type="submit"
            data-ng-hide="true"
            data-ng-click="save()"/>

answered Jun 21, 2014 at 1:00

frekele

6546 silver badges13 bronze badges

Comments

Ben Aubin · Accepted Answer · 2015-04-21 16:36:49Z

Here is index.html:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7" data-require="angular.js@*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div ng-controller="NavCtrl">
  <form ng-submit="search()">
    <input class="col-xs-9" type="text" placeholder="Search" ng-model="term" />
    <input type="submit" ng-submit="search()" />
  </form>
</div>

</body>

</html>

I left the original get and post requests alone, except that I changed it so that it would return a promise. I couldn't get the original search working because I wasn't sure what it was trying to accomplish. I cleaned up the project, employed some "best practices", and got the angular directives working. This won't benefit the person who submitted the question, but might help somebody else coming along with a similar problem. Here is the script file:

(function(){

var app = angular.module('myApp', []);

app.controller('NavCtrl', NavCtrl);

function NavCtrl($scope, $http, $location) {

$scope.results = ["Test"];
$scope.term = "";
$scope.reqs = "5";
$scope.pics = "45";
$scope.ddata = "asdasd";
$scope.ddata = $http.post("{% url 'get-nav-info' %}").then(
  function(result) {
//  $scope.reqs = result.data.data.num_request;
//   $scope.pics = result.data.data.num_photo;
  return result.data;
});

//$scope.reqs = $scope.ddata.num_request;
//$scope.pics = $scope.ddata.num_photo;

$scope.search = function() {
  alert("search function was called");
  //alert("test");
  $location.absUrl();
  $location.path("{% url 'search-term-show' %}?     term="+$scope.term).replace();
  $http.get("{% url 'search-term-show' %}?term="+$scope.term)
     .then(function(result) {
     //Successful
     console.log(result.data);
  },
  function() {
    //Error
    console.log("Could not locate term.");
  });

return result.data
};

}
})();

user1941489 · Accepted Answer · 2015-12-17 18:10:23Z

0

Had the same problem and ngSubmit seems to work better with objects, convert your ng-model to foo.term and access it in the controller as $scope.foo.term.

This will work.

To test if you're binding correctly,

Underneath the input, do something like {{ foo.term }} and see value updating

answered Dec 17, 2015 at 18:10

user1941489

Collectives™ on Stack Overflow

ng-submit in angularJs is not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related