I have a HTML button that is using Bootstrap data-dismiss to close a form. I have a condition that is to prevent the user from proceeding if x field is not populated.
Once this button is pressed it goes to a diff form page and I have tried to access the button to no avail.
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
I tried adding an id in and this did nothing.
$("#close-edit-roles-save").click(function() {
console.log('Hello world');
});
$(".btn btn-success").click(function() {
console.log('Goodbye world');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='close-edit-roles-save' type="button" class="btn btn-success" data-dismiss="modal">Close</button>
Related
I develop a form to add users, the form works, but the problem is
when click on the button submit two successive times, the method add two users, I want the button submit (add) disable after click directly ( I work with angular 5)
HTML Code :
<form [formGroup]="addfrm">
...
...
<div style="text-align:center">
<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid">add</button>
<button data-dismiss="modal" class="btn btn-default">cancel</button>
</div>
</form>
You can define a field within your component and set it to true when submitted.
<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid || submitted">add</button>
within component
export class MyComponent {
submitted = false;
...
processAdd() {
this.submitted = true;
this.someService.post(this.addForm).subscribe(result => {
this.submitted = false; // reset it on response from server
});
}
}
You can try with ngForm directive :
<form [formGroup]="addfrm" #myform="ngForm">
<div style="text-align:center">
<button class="btn btn-primary" (click)="processAdd()" [disabled]="myform.submitted">add</button>
<button data-dismiss="modal" class="btn btn-default">cancel</button>
</div>
</form>
<button type="button" class="btn btn-default">A </button>
<button type="button" class="btn btn-default">B </button>
How can I add a default value to my button A. Like I wanted button A to have a value of "OK" and B a value of "BYE". So if button A is clicked then I am able to get the value "OK". How can I achieve that in angularjs?
Thank you in advance.
You can hard code the value of your button like this:
<button type="button" class="btn btn-default" ng-click="callFun('OK')">A </button>
<button type="button" class="btn btn-default" ng-click="callFun('BYE')">B </button>
and in your script add a function like this:
$scope.callFun = function(value){
if(value && value==='OK'){
// Do stuff for OK
}else{
// Do stuff for BYE
}
}
Working Code here :
<div ng-app="myApp" ng-controller="myCtrl">
<button type="button" class="btn btn-default" ng-click="callFun('OK')">A </button>
<button type="button" class="btn btn-default" ng-click="callFun('BYE')">B </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.callFun = function(value){
if(value && value==='OK'){
alert(value)
// Do stuff for OK
}else{
alert(value)
// Do stuff for BYE
}
}
});
</script>
Use onClick() function and inside these function you assign these value i.e Ok and Bye
You can do it using ng-init and ng-click.
<button type="button" ng-init="btnname=OK" ng-click="callA()"class="btn btn-default">A </button>
<button type="button" ng-init="btnname=BYE" ng-click="callB()" class="btn btn-default">B </button>
Example link :
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-click
Refer the manual for more :
https://docs.angularjs.org/api/ng/directive/ngClickenter link description here
How to get ng-model value for only active button in angularjs
<div class="time_buttons mar_bot_30" ng-init="selectedBtn = 'minute'">
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'second'}" ng-click="selectedBtn = 'second'" ng-model="SECOND">Second</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'minute'}" ng-click="selectedBtn = 'minute'" ng-model="MINUTE">Minute</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'hour'}" ng-click="selectedBtn = 'hour'" ng-model="HOUR">Hour</button>
</div>
Thank you....
<div class="time_buttons mar_bot_30">
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'second'}" ng-click="selectedButton('Second')">Second</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'minute'}" ng-click="selectedButton('Minute')" >Minute</button>
<button class="btn btn-default" ng-class="{'active':selectedBtn === 'hour'}" ng-click="selectedButton('Hour')">Hour</button>
</div>
JS
$scope.selectedBtn = 'minute'
$scope.selectedButton = function(status) {
console.log(status)
}
You need to call some function in ng-click and pass the parameter.No need of use ng-model in button.
here selectedBtn will give default value and after clicking selectedButton function will call and give u selected value
check using hasClass
angular.element(button).hasClass('active');
Refer angular.element
I have the following HTML below. I use AngularJS as framework and I will switch from on to off and back.
My question now would be how to switch the two buttons off and on - is it possible only to do it in html or do I need to handle it in the controller?
<div ng-click="vm.makeSomethingInController(scheduleResponseContent)" ng-show="vm.changeService">
<button class="btn btn-xs btn-default" >ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
Function in the controller:
function setTriggerForLoadingOriginalSchedule(scheduleResponseContent) {
vm.schedulepresenceonly = !vm.schedulepresenceonly;
loadScheduleResponseOfUser(getCurrentDate(), '', vm.viewType, true, scheduleResponseContent.institutionUserConnectionId);
}
Thanks a lot!
You can use ng-hide and ng-show
like this
<button ng-show="schedulepresenceonly" class="btn btn-xs btn-default" >ON</button>
<button ng-hide="schedulepresenceonly" class="btn btn-xs btn-primary active">OFF</button>
or just ng-if
Like this
<button ng-if="schedulepresenceonly" class="btn btn-xs btn-default" >ON</button>
<button ng-if="!schedulepresenceonly" class="btn btn-xs btn-primary active">OFF</button>
Purely It depends On your Problem domain or What Problem Domain Says for you man for example , I have problem domain says When the user will click the ON button he/she get in to the different path(Page view) and if it is OFF button routes to different path(Page view).
Example,
In HTML
<button class="btn btn-xs btn-default" data-ng-click="success()">ON</button>
<button class="btn btn-xs btn-default" data-ng-click="failure()">OFF</button>
In Controller
$scope.success = function(){
<---Put Your Code--->
console.log('Success Path');
$location.url('/success');
}
$scope.failure = function(){
<---Put Your Code--->
console.log('Failure Path');
$location.url('/failure');
}
I am using Parsley.js for validating my Bootstrap formatted HTML forms. It works pretty fine. What I want to do now is to change the color for the submit button if validation fails.
I read the documentation from Parsley.js, but I could not find something like adding a class to the submit button, depending on validation.
Example:
<form>
<input type="text" id="fehler" name="fehler" required>
<button type="submit" class="btn btn-default">Submit</button>
</form>
After click (and validation) should it change to something like this:
<button type="submit" class="btn btn-default novalid"></button>
or this:
<button type="submit" class="btn btn-danger"></button>
Try this :
Put an ID on your button like "validateFormButton" and create this method to call after sending your form :
function change_class(formIsValid) {
var btn = document.getElementById("validateFormButton");
if(formIsValid)
btn.className= "btn btn-default novalid";
else
btn.className= "btn btn-danger";
}