AngularJS ng-submit function not being executed
Question
I'm developing a AngularJS project, and i have a template which displays a table of users, & then has a button (which raises a modal form) to Add a new user.
The table displays fine, the modal form is raised on the button click, but the submit function tied to the form is never fired upon clicking the submit function. Here's an image of the template...
A user then clicks on "Add Staff" which raises the modal...
And after the user fills in the form, the ng-submit function is never being fired.
Here's the HTML code of the template;
<div data-ng-controller="admController">
<div class="page-wrapper">
<div class="banner notdark-translucent-bg" style="background-image:url('assets/images/banner/admin.jpeg'); background-position: 50% 50%;">
<div class="breadcrumb-container">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li>
<li class="breadcrumb-item active">Administration</li>
</ol>
</div>
</div>
</div>
<section class="main-container">
<div class="container">
<div class="row">
<div class="main col-lg-8">
<h1 class="page-title">Administration</h1>
<div class="separator-2"></div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th class="text-center">Name</th>
<th class="text-center">Address</th>
<th class="text-center">Suburb</th>
<th class="text-center">Post Code</th>
<th class="text-center">Email</th>
<th class="text-center">Phone</th>
<th class="text-center"> </th>
</tr>
</thead>
<tbody>
<tr class="text-center" data-ng-repeat="o in obj">
<td>{{o.name}}</td>
<td>{{o.address}}</td>
<td>{{o.suburb}}</td>
<td>{{o.postcode}}</td>
<td>{{o.email}}</td>
<td>{{o.phone}}</td>
<td><input type="radio" name="id" id={{o.id}} value={{o.id}}/></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button>
</div>
</div>
</div>
<div class="modal" id="addModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title text-center">Add New Staff</h5>
</div>
<div class="modal-body">
<form data-ng-submit="addstaffform()" name="addstaffform" method="POST">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" class="form-control form-control-sm" name="name" id="name" placeholder="">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control form-control-sm" name="address" id="address" placeholder="">
</div>
<div class="form-group">
<label for="suburb">Suburb:</label>
<input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder="">
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder="">
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder="">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control form-control-sm" name="email" id="email" placeholder="">
</div>
<div class="form-group">
<label for="suburb">Password:</label>
<input type="password" class="form-control form-control-sm" name="password" id="password" placeholder="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" value="Reset" class="btn btn-secondry">Clear</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="editModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center">Edit Staff</h5>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div class="modal-body">
<form ng-submit="submit(editstaffform)" name="editstaffform" method="post" action="" role="form">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" class="form-control form-control-sm" name="name" id="name" placeholder="">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control form-control-sm" name="address" id="address" placeholder="">
</div>
<div class="form-group">
<label for="suburb">Suburb:</label>
<input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder="">
</div>
<div class="form-group">
<label for="postcode">Post Code:</label>
<input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder="">
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder="">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control form-control-sm" name="email" id="email" placeholder="">
</div>
<div class="form-group">
<label for="suburb">Password:</label>
<input type="password" class="form-control form-control-sm" name="password" id="password" placeholder="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" value="Reset" class="btn btn-secondry">Clear</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal" id="deleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div> <!-- End Controller -->
And here's the Angular Controller
app.controller("admController", function ($scope, $http, $location) {
$(document).ready(function() {
getStaff();
});
$scope.addstaffform = function() {
$scope.formData = {};
$http({
method : 'POST',
url : 'assets/php/addStaff.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).success(function(data){
console.log(data);
if (!data.success) { //success comes from the return json object
$scope.result='bg-success';
} else {
$('#addModal').modal('hide');
getStaff();
$scope.result='bg-danger';
}
}).error(function(data){
console.log(data);
});
};
function getStaff() {}
$http.get('assets/php/admin.php')
.then(
function (response) {
$scope.obj = response.data;
},
function (response) {
// error handling routine
}
);
});
so in debugging i've found that $scope.addstaffform = function() is being executed on the template loading, but its never fired when clicking on the submit button.
2 answers
solution1
1 ACCPTED 2018-07-02 09:19:28
var app = angular.module('myApp', []); app.controller("admController", function ($scope, $http, $location) { $scope.addstaffform = function() { alert("hello"); } });
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <div data-ng-controller="admController"> <div class="page-wrapper"> <div class="banner notdark-translucent-bg" style="background-image:url('assets/images/banner/admin.jpeg'); background-position: 50% 50%;"> <div class="breadcrumb-container"> <div class="container"> <ol class="breadcrumb"> <li class="breadcrumb-item"><i class="fa fa-home pr-2"></i><a class="link-dark" href="home">Home</a></li> <li class="breadcrumb-item active">Administration</li> </ol> </div> </div> </div> <section class="main-container"> <div class="container"> <div class="row"> <div class="main col-lg-8"> <h1 class="page-title">Administration</h1> <div class="separator-2"></div> </div> </div> </div> </section> <div class="container"> <div class="table-responsive"> <table class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th class="text-center">Name</th> <th class="text-center">Address</th> <th class="text-center">Suburb</th> <th class="text-center">Post Code</th> <th class="text-center">Email</th> <th class="text-center">Phone</th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr class="text-center" data-ng-repeat="o in obj"> <td>{{o.name}}</td> <td>{{o.address}}</td> <td>{{o.suburb}}</td> <td>{{o.postcode}}</td> <td>{{o.email}}</td> <td>{{o.phone}}</td> <td><input type="radio" name="id" id={{o.id}} value={{o.id}}/></td> </tr> </tbody> </table> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button> </div> </div> </div> <div class="modal" id="addModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h5 class="modal-title text-center">Add New Staff</h5> </div> <div class="modal-body"> <form data-ng-submit="addstaffform()" name="addstaff" > <div class="form-group"> <label for="name">Full Name:</label> <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder=""> </div> <div class="form-group"> <label for="address">Address:</label> <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder=""> </div> <div class="form-group"> <label for="suburb">Suburb:</label> <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder=""> </div> <div class="form-group"> <label for="postcode">Post Code:</label> <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder=""> </div> <div class="form-group"> <label for="phone">Phone:</label> <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder=""> </div> <div class="form-group"> <label for="suburb">Password:</label> <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder=""> </div> <button type="submit" class="btn btn-primary" >Submit</button> <button type="reset" value="Reset" class="btn btn-secondry">Clear</button> </form> </div> </div> </div> </div> <div class="modal" id="editModal" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-center">Edit Staff</h5> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>--> </div> <div class="modal-body"> <form ng-submit="submit(editstaffform)" name="editstaff" method="post" action="" role="form"> <div class="form-group"> <label for="name">Full Name:</label> <input type="text" class="form-control form-control-sm" name="name" id="name" placeholder=""> </div> <div class="form-group"> <label for="address">Address:</label> <input type="text" class="form-control form-control-sm" name="address" id="address" placeholder=""> </div> <div class="form-group"> <label for="suburb">Suburb:</label> <input type="text" class="form-control form-control-sm" name="suburb" id="suburb" placeholder=""> </div> <div class="form-group"> <label for="postcode">Post Code:</label> <input type="tel" class="form-control form-control-sm" name="postcode" id="postcode" placeholder=""> </div> <div class="form-group"> <label for="phone">Phone:</label> <input type="tel" class="form-control form-control-sm" name="phone" id="phone" placeholder=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control form-control-sm" name="email" id="email" placeholder=""> </div> <div class="form-group"> <label for="suburb">Password:</label> <input type="password" class="form-control form-control-sm" name="password" id="password" placeholder=""> </div> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" value="Reset" class="btn btn-secondry">Clear</button> </form> </div> </div> </div> </div> <div class="modal" id="deleteModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </body> </html>
just change your form name and function name means these should be different or these should be differentiable to each other.This is the only possible solution I get .
solution2
0 2018-07-02 16:46:53
Having the form name and function name the same was the problem;
But then i also found another problem with the ajax call ~ due to changes in version 1.6
Old code:
$http({
method : 'POST',
url : 'assets/php/addStaff.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).success(function(data){
console.log(data);
if (!data.success) { //success comes from the return json object
$scope.result='bg-success';
} else {
$('#addModal').modal('hide');
getStaff();
$scope.result='bg-danger';
}
}).error(function(data){
console.log(data);
});
the "success" and "error" callbacks have been deprecated, and replaced with "then" and "catch".
New Code:
$http({
method : 'POST',
url : 'assets/php/addstaff.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload)
}).then(function (response) {
console.log(response.data);
ans = response.data;
if (!ans.success) { //success comes from the return json object
$scope.result='bg-success';
} else {
$('#addModal').modal('hide');
getStaff();
$scope.result='bg-danger';
}
}).catch(function(response){
console.log(response.data);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ng-submit is not executed
AngularJS - function never called with ng-submit
Angularjs ng-submit function is not working
How to change function in ng-submit angularjs
AngularJS - Ng-Submit not executing function call
angularjs ng-submit not working
ng-submit not triggering in angularjs
ng-submit not working in angularjs
AngularJS function not invoked by ng-submit button click
AngularJS wait submit the Form (ng-submit)
Related Tags