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);
}
Related
I have to show the validation after submit button in our form i don't understand what's the wrong in my code tell m anyone how to implemented using after submit?
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)">
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
You need to add in your input a ng-required="true" and disable default form validation with novalidate like this:
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="demoController" >
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username" ng-required="true">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
</div>
<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
</span>
<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done
</button>
I want to show message on both untouched and button click, but it is showing only on touched and also form must not be submitted as it is working.
Check this one
<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="(myForm.job.$untouched || myForm.$invalid)">
<button class="btn" type="button" ng-click="myForm.$valid && submitUser()">Done</button>
First change your button code to this:
<button class="btn" type="button" ng-click="submitUser()">Done</button>
change your span code to
<span ng-show="myForm.job.$touched || buttonClicked">
In your Controller:
$scope.buttonClicked = false; // Set it to false on initial load
$scope.submitUser = function(){
..................
$scope.buttonClicked = true;
..................
}
You could use $submitted in a below combination, but for the same you to submit form, that you're not doing. So
<form name="myForm" ng-submit="myForm.$valid && submitUser()">
<input type="text" ng-model="job" required class="form-control" name="job">
<span ng-show="(myForm.job.$touched || myForm.$submitted) && myForm.job.$invalid">
My Error
</span>
...
...
<button class="btn" type="submit">Done</button>
</form>
You can check for $touched in the input elements and button click evaluated using a variable.
var ang = angular.module("app", []);
ang.controller("ctrl", function($scope){
$scope.submitUser = function(){
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app">
<form name="myForm">
<input type="text" name="job" ng-model="job" required class="form-control" >
<span ng-show="myForm.job.$touched ||show">Error</span>
<button class="btn" type="button" ng-click="myForm.$valid ? submitUser() : (show=true)">Done</button>
</form>
</div>
Change the button to set the $touched status of the control:
<button class="btn" type="button"
ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
</button>
Then the message will show when the button is clicked.
The DEMO
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<h1>myForm</h1>
<form name="myForm">
<input type="text" ng-model="job"
required class="form-control" name="job">
<span ng-show="myForm.job.$touched && myForm.job.$invalid">
Enter valid job
</span>
<button class="btn" type="button"
ng-click="myForm.job.$setTouched(); myForm.$valid && submitUser()">Done
</button>
</form>
<br>myForm.job.$touched = {{myForm.job.$touched}}
<br>myForm.job.$invalid = {{myForm.job.$invalid}}
</body>
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/
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/
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)