how do i find the trigger button in form by ng-submit
and get attribut in this button
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" att1="A" att2="B" value="Edit" />
<input type="submit" att1="C" att2="D" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert(this.att1)
alert(this.att2)
}
}
</script>
You can use ng-click to change values on your scope prior to submission
<form ng-submit="submit()" ng-controller="Ctrl">
<input type="submit" ng-click="setAtts('A', 'B')" value="Edit" />
<input type="submit" ng-click="setAtts('C', 'D')" value="Delete" />
</form>
<script>
function Ctrl($scope) {
$scope.submit = function() {
alert($scope.att1);
alert($scope.att2);
};
$scope.setAtts = function(a1, a2) {
$scope.att1 = a1;
$scope.att2 = a2;
};
}
</script>
Edit: As a side note $event will not work for ng-submit, if you're interested in using $event.target (which probably shouldn't be done from a controller anyhow)
Related
in my form, i am using two submit buttons. when i submit the button, first need to check button id and execute function accordingly. please check my code.
$scope.saveme = function(user,data) {
alert(id);
}
<form name="myform" ng-submit="saveme(user,data)">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" data="{{button.id}}"> Save</button>
<button type="submit" id="ss" data="{{button.id}}">Save with Exit </button>
</form>
actually i need to alert button id that i clicked.
You can do something like this:
$scope.saveme = function(user,exit) {
if(exit){
//do something
}else{
//do something else
}
alert(id);
}
<form name="myform">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="saveme(user,false)"> Save</button>
<button type="submit" id="ss" ng-click="sameme(user,true)">Save with Exit</button>
</form>
You will know which button was clicked checking the exit param value
You can try as below code.
if your first button return true second button will not trigger if your second button return false second button will trigger.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myform">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="saveme(1) || saveme1()" > Save</button>
</form>
</div>
</body>
</html>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl', function($scope) {
$scope.saveme = function(user) {
if(user === 1){
alert('first button');
return false
} else {
alert('first button fails');
return true;
}
};
$scope.saveme1 = function(user,data) {
alert('second button');
};
});
</script>
<form name="myform" ng-submit="saveme(user,data)">
Name : <input type="text" ng-model="user.name"/>
Age : <input type="text" ng-model="user.age"/>
<button type="submit" id="s" ng-click="save('s')"> Save</button>
<button type="submit" id="ss" ng-click=saveExit"('ss')" >Save with Exit </button>
</form>
$scope.saveExit = function(val)
{
alert(val);
}
$scope.save= function(val)
{
alert(val);
}
As my title says, i was creating a login form and following was my html. but submit button is not working.
<body ng-controller="AdminController">
<div class="container">
<section id="content">
<form action="">
<h1>Log In </h1>
<div>
<input type="text" placeholder="Username" required="" id="vxUserName" ng-model="UserName" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="vxUserPass" ng-model="UserPassword" />
</div>
<div style="padding-left:10px;padding-bottom:70px;padding-top:30px">
<input type="button" class="btn btn-success" value="Log in" id="vxLogin" ng-click="CheckUser()" />
</div>
</form><!-- form -->
</section><!-- content -->
</div>
</body>
Here is my angularjs.
app.controller('AdminController', function ($scope, $http, $location, $timeout, $filter) {
var SelectedPackages = "";
$scope.ContactDetails = [];
var SelectedEnquiry = sessionStorage.getItem("_SelectedEnquiry");
$scope.setId = function (setal) {
alert(SelectedEnquiry);
};
$scope.CheckUser = function () {
alert("a");
sessionStorage.setItem("_OwnAccessCount", "0");
sessionStorage.setItem("_OwnAccessUsed", "0");
debugger;
$http.get("ws/ws_HolidayPackages.asmx/CheckUser?&_UserName=" + $scope.UserName + "&_Password=" + $scope.UserPassword)
.success(function (data) {
sessionStorage.setItem("_UserPassword", $scope.UserPassword);
var userPassword = sessionStorage.getItem("_UserPassword");
debugger;
data = data.replace('<?xml version="1.0" encoding="utf-8"?>', '');
data = data.replace('<string xmlns="http://tempuri.org/">', '');
data = data.replace('</string>', '');
.....
......
.....
as button click was not working. i tried everything like changing giving input a type, changing ng-click to ng-submit, giving $event.stopPropagation(); with ng-click but my checkuser method not getting called. i also remived all html and only left input button but still it is not working.
<body ng-controller="AdminController">
<input type="button" class="btn btn-success" value="Log in" id="vxLogin" ng-click="CheckUser();" />
</body>
Probably you are missing the ng-app directive in your HTML,
<body ng-app="yourAppname" ng-controller="AdminController">
Just like in the title: I am wondering how I can validate, if my form has at least one input which is not empty - and then change the submit button to enabled?
Thanks!
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-xs-12">
<form name="myForm">
<input type="text" ng-model="user.firstname">
<input type="text" ng-model="user.secondname">
<button type="button" ng-click="checkIsEmpty()" ng-disabled="!user">SUBMIT
</button>
</form>
</div>
</div>
EDIT:
JS:
function MyCtrl($scope) {
$scope.user = {};
$scope.checkIsEmpty = function(){
return angular.equals({}, $scope.user);
}
}
Fiddle:http://jsfiddle.net/nq1eyj1v/128/
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
How is it possible to delete the ul element with the reset button in the following code
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<form ng-submit="submit()" ng-controller="Ctrl">Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<input type="reset" id="reset" value="Reset" />
<ul>
<li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
</ul>
</form>
<script>
function Ctrl($scope) {
$scope.ret = {}
$scope.reset = function() {
$scope.ret = {}
}
$scope.submit = function() {
var str = $scope.text;
var ret = $scope.ret
for (x = 0, length = str.length; x < length; x++) {
var l = str.charAt(x);
ret[l] = (isNaN(ret[l]) ? 1 : ret[l] + 1);
}
$scope.ret = ret
}
}
</script>
</body>
</html>
Thank you in advance.
You can use ng-show to hide it rather than remove it from the DOM.
<form ng-init="show=true" ng-controller="Ctrl" ng-submit="submit()">Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<input type="reset" id="reset" value="Reset" ng-click="show=false" />
<ul ng-show="show">
<li ng-repeat="(key,val) in ret">{{key}} = {{val}}</li>
</ul>
</form>
The problem here is that you have not wired up the reset method on the controller. It should be like this.
<input type="reset" id="reset" value="Reset" ng-click='reset()'/>
See updated fiddle http://jsfiddle.net/cmyworld/WdVDh/1/