Form submitting not working in angularJS?

Question

I am developing an angularJS application using Ionic framework for layout design. For some reason my form is not being submitted. The function is supposed to submit username and password and POST it to an online PHP file. Here is my code:

Template:

<ion-view title="Login">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
<?php include '../lib/init.php'; ?>
        <form class="list validate" ng-submit="submit()">
          <input type="hidden" name="action" value="login">
            <ion-list>
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="text" ng-model="username" name="username" placeholder="">
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" ng-model="password" name="password" placeholder="">
                </label>
            </ion-list>
            <div class="spacer" style="height: 40px;"></div>
            <button type="submit" id="login-button4" class="button button-royal  button-block">Log in</button>
            <a ui-sref="register" id="login-button5" class="button button-royal  button-block button-clear">Dont have an account?</a>
            <a ui-sref="forgotPassword" id="login-button6" class="button button-royal  button-block button-clear">Forgot password?</a>
        </form>
    </ion-content>
</ion-view>

Controller:

.controller('loginCtrl', function($scope, $state, $stateParams, $ionicPopup, $timeout) {

  //popup alert starts here
   $scope.showAlert = function(status,message) {
   var alertPopup = $ionicPopup.alert({
     title: status,
     template: message,
   });
 };
 //popup alert ends here


  $scope.submit = function() {
        if ($scope.username && $scope.password) {
          var url = 'my PHP file url';
          var username= $scope.username;
          var password= $scope.password;

          $scope.list = [];


          var dataString = 'username='+ username  + '&password=' + password;
          $scope.list.push(dataString);
          $scope.text = '';

          $http({
            type: "POST",
            url: url,
            data: dataString,
            success: function(data) {
            try 
            {
              alert(data);
            } 
            catch(e) 
            {
              alert(data);
            }   
            }
            });


        }
      };

})

Route:

  .state('login', {
    url: '/login.php',
    templateUrl: 'templates/login.php',
    controller: 'loginCtrl'
  })

Does anyone know whats going on?

It's likely that as you haven't defined your username and password scope variables, they won't be watched and updated when the user populated the fields. Try adding $scope.username = ''; $scope.password = ''; before your $scope.submit = fun.... — Gavin
– Gavin, Commented May 10, 2016 at 15:28

Kyle · Accepted Answer · 2016-05-10 15:33:26Z

3

Try this:

HTML

<form class="list validate" ng-submit="submit(username, password)">

Javascript

$scope.submit = function(usr, pw) {
    if(!usr || !pw) {
        alert('empty usr or pw');
        return;
    }

    //your stuff, not mine
    $scope.list = [];
    var dataString = 'username='+ usr + '&password=' + pw;
    $scope.text = '';

    var payload = {
        username: usr,
        password: pw
    };

    $http.post('path/to/php/file', payload).then(function(response) {
        //success
        alert(response.data);
    }).catch(function(response) {
        //an error occurred
        alert(response.data);
    });
}

answered May 10, 2016 at 15:33

Kyle

5,6077 gold badges38 silver badges48 bronze badges

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

4 Comments

Daniel Over a year ago

but how am I supposed to get username and password from fields into ng-submit="submit(username, password)"?

Kyle Over a year ago

You declare it in your model. controller(...function(...) {$scope.username = null; $scope.password = null; } Then bind it to the inputs: <input ng-model="username" /> <input ng-model="password" />

Daniel Over a year ago

I have ng-modelled 'username' and 'password' but on submitting, it gives error emtpy usr or pw even though i entered username and password

Kyle Over a year ago

You need to declare it in your scope AND bind it to your UI using ng-model.

Collectives™ on Stack Overflow

Form submitting not working in angularJS?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related