Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Neither ng-submit or ng-click responding to submit button in a form

I'm trying to make a very simple login form in angularjs, but it seems that neither the ng-submit() nor the ng-click directive seems to be working.

I've created a very basic plunker example here: http://plnkr.co/edit/BrLIxSZggZofCBoZpjT4?p=preview In which either/both the ng-click or the ng-submit should open a simple alert window with an 'a' letter. However nothing happens when I click on the sign in button. What's more interesting, that if I change ng-app to ng-app="test" then the form get submitted but the alert doesn't get called either.

What am I doing wrong?

The basic example:

<head>
  <script data-require="[email protected]" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app>
  <!-- Login -->
  <form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
   ng-submit="alert('a')" ng-controller="Ctrl">

    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
    <input type="submit" ng-click="alert('a')" name="login" value="Sign in" />

  </form>
  <!-- / Login -->
</body>

</html>
like image 501
geujv Avatar asked Jan 20 '14 16:01

geujv


1 Answers

ng-submit directive invokes a function which should be in the controller. The ng-submit directive will be triggered provided the form fields are valid

Form/HTML

<form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
   ng-submit="submit()" ng-controller="Ctrl">
    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
    <input type="submit" name="login" value="Sign in" />
</form>

Controller

function Ctrl($scope) {
    $scope.model = {};
    $scope.submit = function(){
        alert('a');
    }
}

Plunkr

like image 82
dcodesmith Avatar answered Oct 13 '22 23:10

dcodesmith