After clicking submit, Form does nothing

Question

I have been working on a permissions system for my NodeJS (Using the SailsJS MVC) and have ran into a problem. After solving my first error which is outlined here I am now running into an issue where the form does nothing. It does not send an error to console and it does not log an error in the SailsJS console itself. Below is my code.

/**
 * GroupsController (API)
 *
 * @description :: Server-side logic for managing Permissions
 * @help        :: See http://sailsjs.org/#!/documentation/concepts/Controllers
 */

module.exports = {

  update: function(req, res, next) {

    var groupObj = {
      groupName: req.param('groupName'),
      canViewUsers: req.param('canViewUsers'),
      canEditUsers: req.param('canEditUsers'),
      canPromoteToStaff: req.param('canPromoteToStaff'),
      canViewNotes: req.param('canViewNotes'),
      canEditPermissions: req.param('canEditPermissions')
    };

    Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
      if (err) {
        return res.redirect('/group/edit/' + req.param('id'));
      }

      res.redirect('/');
    });
  },

  createGroup: function(req, res) {
    Groups.create({
      groupName: req.param('groupName'),
      canViewUsers: req.param('canViewUsers'),
      canEditUsers: req.param('canEditUsers'),
      canPromoteToStaff: req.param('canPromoteToStaff'),
      canViewNotes: req.param('canViewNotes'),
      canEditPermissions: req.param('canEditPermissions')
    }).exec({
      error: function (err) {
        return res.negotiate(err);
      }
    });
  }

};

GroupsController (Form)

angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {

  $scope.groupCreateForm = function(){


    // Submit request to Sails.
    $http.post('/createGroup', {
      groupName: $scope.createGroup.groupName,
      canViewUsers: $scope.createGroup.canViewUsers,
      canEditUsers: $scope.createGroup.canEditUsers,
      canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
      canViewNotes: $scope.createGroup.canViewNotes,
      canEditPermissions: $scope.createGroup.canEditPermissions
    })
      .then(function onSuccess(sailsResponse){
        window.location = '/groups';
      })
      .catch(function onError(sailsResponse){

        // Handle known error type(s).
        // If using sails-disk adpater -- Handle Duplicate Key
        var groupAlreadyExists = sailsResponse.status == 409;

        if (groupAlreadyExists) {
          toastr.error('That group already exists', 'Error');
        }

      })
  }}]);

HTML Form

<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
  <div class="row">
    <div class="bs-component">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Insomnia eSports</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="/groups"><i class="fa fa-users" aria-hidden="true"></i> Group Management </a></li>
            </ul>

            <!--
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            -->
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/logout">Sign Out</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>

<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
  <h2 class="form-signin-heading">Create A Group</h2>
  <div class="row">

    <!-- Group Name -->
      <label>Group Name</label>
      <input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>

    </div>

    <!-- Can View Users -->
  <div class="row">
      <label>View Users?</label>
      <input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
  </div>

    <!-- Can View Users -->
  <div class="row">
      <label>Edit Users?</label>
      <input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
  </div>

    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Promote to Staff?</label>
      <input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
    </div>


    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Can view notes?</label>
      <input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
  </div>

    <!-- Can Promote To Staff -->
  <div class="row">
      <label>Can edit permissions?</label>
      <input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
    </div>
  <br/>

  <!-- Disable signup button until the form has no errors -->
  <button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
    <span>Create Group</span>
  </button>
  <input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>

Answer 1

You don't have the right ng-controller attached to your form, so the $scope.groupCreateForm shouldn't even be getting called. Try adding ng-controller="GroupsController" to your form and try again.

<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">

Answer 2

I fixed the issue with the following code

<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>

I had the wrong app and controller defined. Thank you to Fissio for sparking the idea that this was the problem.

After clicking submit, Form does nothing

Question

2 answers

solution1
0 2016-11-03 11:27:00

solution2
0 ACCPTED 2016-11-03 14:28:10

After clicking submit, Form does nothing

Question

2 answers

solution1 0 2016-11-03 11:27:00

solution2 0 ACCPTED 2016-11-03 14:28:10

solution1
0 2016-11-03 11:27:00

solution2
0 ACCPTED 2016-11-03 14:28:10