I know that there are a lot of other similar questions but I didn't find the answer there.
<html ng-app="app" ng-controller="AppController">
...
<form class="navbar-form navbar-left" role="search" ng-submit="alert()">
<div class="form-group">
<input type="text" class="form-control search" ng-model="text" />
</div>
<button type="submit" class="btn btn-default icon-default icon-search">Submit </button>
</form>
</html>
You cant use alert (window.alert) function in angular as you normally do in plain javascript. This is example from angular $window service docs:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert(greeting);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting(greeting)">ALERT</button>
</div>
If you put doGreeting (name it as you want) function in your controller and inject $window, then your example should work:
...
<form class="navbar-form navbar-left" role="search" ng-submit="doGreeting()">
...
Try to submit the form by adding ng-click in the button tag and call submit function by passing your form in the ng-click. The function is where you write your logic in the controller. submit
Related
Scope variable returns undefined value when using inside same Scope function.
index.html
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
</body>
app.js
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function(){
alert($scope.name+' scope variable');
}});
output:
undefined scope variable
Try this example :
index.php
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="start.name">
<input type="submit" name="submit" value="Submit">
</form>
app.js
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.start= {};
$scope.submit = function(){
alert($scope.start.name+' scope variable');
);
$scope.name is coming undefined because it is a scope model declared in UI and no value is assigned to it yet. This is expected behavior. If you want some default values assign those from controller or use an ng-init.
Try This...
html files ...
<html>
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
</body>
<script src="app.js"></script>
</body>
</html>
this is your js file
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function(){
alert($scope.name+' scope variable');
}
});
just pass the modal value in ng-submit like this
1st way ->
<form ng-submit="submit(name)">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
js file
$scope.submit = function(value){
alert(value+' scope variable');
}});
2nd way ->
or you can do this
<form ng-submit="submit()">
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit">
</form>
js file
your code is fine just check parenthesis it is ok code
$scope.submit = function(){
alert($scope.name+' scope variable');
};
use this working plunker
https://plnkr.co/edit/C7oZck4hpt5xHBKkVGku?p=preview
Please go through below code --
HTML -
<body ng-app="starter" ng-controller="AppCtrl">
<form>
<span class="input-label">name</span>
<input type="text" name="name" ng-model="name">
<input type="submit" name="submit" value="Submit" ng-click="submit();">
</form>
</body>
JS
<script>
angular.module('starter', []).controller('AppCtrl', function($scope) {
$scope.name='';
$scope.submit = function(){
alert($scope.name+' scope variable');
};
});
</script>
Hope it helps you !
The code looks fine to me there must a syntax error in your controller braces are not completed
I have created a working plunker
https://plnkr.co/edit/UGEa1uvS83cJHAcXxYMi?p=preview
angular.module('starter', [])
.controller('AppCtrl', function($scope) {
$scope.submit = function() {
alert($scope.name+' scope variable');
}
});
I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.
https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview
My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.
My form:
<div class="modal-body">
<form class="form-horizontal" name="contact" ng-submit="contactForm()">
<div class="form-group">
<label class="col-lg-3 control-label">Name* :</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email* :</label>
<div class="col-lg-8">
<input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile* :</label>
<div class="col-lg-8 row">
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
<div class="col-lg-8">
<input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message :</label>
<div class="col-lg-8">
<textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-7 col-lg-5">
<button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div>
</form>
</div>
Controller:
$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};
You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.
Here is the working plunker using angular-ui bootstrap.
PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>Email address:</label>
<input type="email" ng-model="user.email" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
$scope.user = {
email: '',
password: null,
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$http({
method: 'POST',
url: 'https://mytesturl.com/apihit',
headers: {
"Content-type": undefined
}
, data: user
}).then(function (response) {
console.log(response);
$modalInstance.dismiss('cancel');
}, function (response) {
console.log('i am in error');
$modalInstance.dismiss('cancel');
});
//$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
validation on keyup is working but on click of submit button it's not working. When i click on submit it does no validate although redirect to some other page.
<script>
angular.module("MyApp", [])
.controller('loginCtrl', ['$scope', '$log', function ($scope, $log) {
}]);
</script>
<div id="loginBox" ng-controller="loginCtrl">
<form action="/" id="userLogin" name="myForm" novalidate>
<label>User id</label>
<input type="text" ng-model="userId" name="myUserid" required="" />
<div ng-show="myForm.$submitted || myForm.myUserid.$touched">
<div ng-show="myForm.myUserid.$error.required">Tell us your name.</div>
</div>
<br /><br />
<input type="submit" name="loginSubmit" ng-click="submit()" value="Login" />
</form>
</div>
You should remove the actions attribute from the form. Like:
<form id="userLogin" name="myForm" novalidate>
You can also add the directive ng-submit in the form and remove the ng-click directive from the submit button.
More information here.
Remove form action .
<form id="userLogin" name="myForm" novalidate>
Here is the plunkr: https://plnkr.co/edit/BchMhCHHETftNuKxBVaj?p=preview
Try adding ng-app to your application. I see no error in having action in form on anything else. checkin those plnkers
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
I am trying to learn angularJS and have problem figuring out how to solve this issue. I am trying to prepend content of the form when user submit the form. This is my code but it's not working. Can anyone help me to figure out where the problem is? Thanks!
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
};
});
<body ng-app="displayText">
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
</div>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</body>
put this piece of code inside the submitText controller div
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
then you whole code should be like
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</div>
here is the Plunker
in your case the ng-repeat="text in outputArr" is out of the controller that means scope of the submitText controller not accessible for the ng-repeat that's why its not print anything