For form validation, either 'Foo' or 'Bar' should be selected below. The form should be invalid, and submit button disabled, if neither one is selected.
Is there an AngularJS directive that's up to the task? We've tried some permutations of "ng-require" and/or "required", along with some other experimentation, but no luck. Is it not possible with buttons?
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Foo')" data-ng-class="{ 'active': vm.caseType == 'Foo' }">Foo</button>
<button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Bar')" data-ng-class="{ 'active': vm.caseType == 'Bar'}">Bar</button>
</div>
</div>
AngularJS 1.2.16; Bootstrap 3.1.1
on click of any of the buttons call a method which sets a flag to false say 'btnSelected'.
Now you could use this flag with ng-disabled inside the submit button.
in the way described below
<div class="btn-group">
<button type="button" class="btn btn-default" data-ng-click="Chk()">Foo</button>
<button type="button" class="btn btn-default" data-ng-click="Chk()">Bar</button>
</div>
Now in your controller.Set the button to true by default to keep the button disabled,enable it via flag through the function like:
$scope.btnSelected = true;
$scope.Chk = function(){
$scope.btnSelected = false;
}
On your save button:
<button type="submit" ng-disabled="testForm.$invalid || btnSelected" class="btn btn- primary">
<span class="glyphicon glyphicon-save"></span> Save </button>
Related
I have two buttons on the asp.net core razor page as shown below code:
<div class="row div-form-control">
<div class="col-md-12">
<div class="form-group actions">
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
<button type="button" class="btn btn-primary" action="search"><i class="icon-new-tab position-left"></i>Search</button>
</div>
</div>
</div>
now I want to hide Submit Button in C# when the User Role is not an Admin like:
string Role="NormalUser";
if(Role!="Admin"){
submit.Visibility = Visibility.Hidden;
}
but it does not work because in submit button I don't have Runat="Server" I want to hide it without using Ranat="Server" by JavaScript or Another Method Can anyone help me how to do it?
Thanks
one way to do it is like:
#if(Role!="Admin"){
<button type="button" name="submit" style="display:hidden;" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}else{
<button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
}
I have these 2 inputs (buttons)
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
<input *ngIf="isEdit" type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</div>
where if isEdit is false then I want to show the button "Add data" else I want to show the button "Update" but I wonder if there's a way to simplify this a bit more rather than using 2 inputs for each. Thanks in advance!
else capability was added somewhat recently; that's probably why most documentation doesn't have it (yet). But you can write this way:
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit; else update" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
</div>
<ng-template #update>
<input type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</ng-template>
It works; but I don't know how much better it is compared to what you have.
So I have this code:
$(document).ready(function(){
if($('#proofAttach-filemanager').val().length !=0){
$('#download_now').attr('disabled', false);
}
else
{
$('#download_now').attr('disabled', true);
}
});
The field with id proofAttach-filemanager is filled up dynamically using elFinder every time I upload a file.
Since the code above is only running every time the page loads, I don't know how to update the download_now button to enable dynamically every time the field is filled (and without keyUp)
HTML Segment:
<div class="form-group col-md-12">
<label>Attachment</label>
<input type="text" id="proofAttach-filemanager" name="proofAttach" value="" class="form-control" readonly="">
<div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default popup_selector">
<i class="fa fa-cloud-upload"></i> Browse uploads</button>
<button type="button" data-inputid="proofAttach-filemanager" id="download_now" class="btn btn-default download_now">
<i class="fa fa-cloud-download"></i> Download</button>
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default clear_elfinder_picker">
<i class="fa fa-eraser"></i> Clear</button>
</div>
Writing your logic inside the change event of that text box should work.
$(document).ready(function(){
toggleDownloadButtonAccess();
$('#proofAttach-filemanager').change(toggleDownloadButtonAccess);
function toggleDownloadButtonAccess(){
var $btnDownload = $('#download_now');
if($('#proofAttach-filemanager').val().length !=0){
$btnDownload.attr('disabled', false);
}
else
{
$btnDownload.attr('disabled', true);
}
}
});
I have 2 Submit buttons on my form:
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
I've recently added some validation to the form submission, but I only want it to apply to the 'Submit' button not the 'Decline All' button. Here's my script:
$("form").submit(function(event) {
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
}
});
Is there a way I can restrict the form validation only fire when the first Submit button is clicked?
There are some solution here .
please change the of Decline All button like attribute : type='button'
use below process
$("#save").click(function (e) {
// put your validation here
$("form").submit();
}
You can change second button type submit to button
<button type="button" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
Using above approach form validation only fire when the first Submit button is clicked
You can change button type from submit to button, see below code
$("form").submit(function(event) {
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
}
});
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="button" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
Since Button type for both the button is same, hence the conflict.
Instead, you may try to change button type from submit to just button, something of this type:
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success">Submit</button>
<button type="button" name="buttonType" value="declineAll" class="btn btn-decline">Decline All</button>
</div>
It seems like you have to add a function on click event of one of your button and inside that function you have to complete your validation tasks. Please check the code below -
HTML
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success" onclick="myFunction()">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
JavaScript
function myFunction(){
alert( "Your validation code" );
}
It is only going to be triggered if the specific button is pressed. On the other buttons triggering it wont be executed. And there wont be any problem of form submission as well.
Hope it helps...:)
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" id="save" class="btn btn-success" id="submitButton">Submit</button>
<button type="submit" name="buttonType" value="declineAll" class="btn btn-danger">Decline All</button>
</div>
$("#submitButton").click(function(event) {
event.preventDefault();
if ($('#productID').val() == '') {
$("#productID_Error").show();
event.preventDefault();
return false;
} else{
$("#yourForm").submit();
}
});
validatde the form on click event on submit button
I have a button group and I want to pass the value of the selected button back to my controller but it isn't working, it just returns undefined...
HTML
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button type="button" ng-model="activeCustomer" value="active" ng-click="getVal()" class="btn btn-default">Active</button>
<button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal()" class="btn btn-default">Inactive</button>
<button type="button" ng-model="activeCustomer" value="all" ng-click="getVal()" class="btn btn-default">All</button>
{{change}}
</div>
Controller :
aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
//set the radio buttons
$scope.change='the data';
$scope.getVal=function(){
console.log($scope.change);
console.log($scope.activeCustomer);
$scope.change=$scope.activeCustomer;
}
}]);
however if I change the code from <button type="button" to <input type="radio" it works! Any ideas? Thanks
http://plnkr.co/edit/Hfu7EGQ05hA59Sgty29H?p=preview
here is the working code -
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button type="button" ng-model="activeCustomer" value="active" ng-click="getVal($event)" class="btn btn-default">Active</button>
<button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal($event)" class="btn btn-default">Inactive</button>
<button type="button" ng-model="activeCustomer" value="all" ng-click="getVal($event)" class="btn btn-default">All</button>
{{change}}
</div>
<script>
aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
//set the radio buttons
$scope.change='the data';
$scope.getVal=function(active){
console.log($scope.change);
console.log(active.currentTarget.value);
$scope.change=active.currentTarget.value;
}
}]);
</script>
You need to pass the $event for each button and access it in controller. Then after you can change the value.
Here is the plunker:-
http://plnkr.co/edit/wkzJ46zRoczkMPomzEok?p=preview
HTML
<div ng-controller="myCtrl">
<button type="button"
value="active"
ng-click="getVal('active')"
class="btn btn-default">
Active
</button>
<button type="button"
value="inactive"
ng-click="getVal('inactive')"
class="btn btn-default">
Inactive
</button>
<button type="button"
value="all"
ng-click="getVal('all')"
class="btn btn-default">
All
</button>
</div>
Controller :
.controller('myCtrl',["$scope",function($scope){
$scope.getVal=function(buttonClicked){
// buttonClicked contains the button name which is clicked
console.log(buttonClicked);
}
}]);
Remember that Bootstrap is just a CSS library that makes things look pretty; it doesn't change the behavior of any browser elements. By default, HTML <button> tags aren't meant to be form elements that represent data, so ng-model doesn't know how to attach to them. If you want a radio button group to work with ng-model, you'll need to use the radio button directive in UI Bootstrap, or some other similar directive.