I have two button groups which I want to response to each other. When one button is clicked, another should be clicked to and vice versa but somehow this simple functionality doesn't work as it should, nothing happens when buttons are activated. What's the problem?
<div class="row">
<div class="col-lg-6">
<div class="btn-group">
<button id="pol1" onclick="document.getElementById('chin2').click()" type="button" class="btn btn-primary">Polski</button>
<button id="chin1" onclick="document.getElementById('pol2').click()" type="button" class="btn btn-primary">Chiński</button>
</div>
</div>
<div class="col-lg-6">
<div class="btn-group">
<button id="pol2" onclick="document.getElementById('chin1').click()" type="button" class="btn btn-primary">Polski</button>
<button id="chin2" onclick="document.getElementById('pol1').click()" type="button" class="btn btn-primary">Chiński</button>
</div>
<button type="button" class="btn btn-danger">Przetłumacz</button>
</div>
Actually your Button click is works..
but you put nested click .. and you didnt mentioned anything on that ...
so button click happens twice or sometimes but you dont know...
Here is the Example have some alert for that click ...
<input type="submit" id="byBtn" value="Change1" onclick="document.getElementById('byBtn1').click()"/>
<input type="submit" id="byBtn1" value="Change" onclick="document.getElementById('byBtn').click()"/>
Related
I've got a Submit button that's used to insert item:
<div class="col-md-12">
<div class="form-body">
<div class="form-group pull-right">
<label for="exampleInputEmail1"> </label> `
<button type="button" id="subbtn" class="btn btn-success margin-t12" ng-click="Submit();">Submit</button> //button
<button type="button" class="btn btn-default margin-t12" ng-click="back();">Cancel</button> </div>
</div>
</div>
Now when I press the Submit button I noticed sometime the item inserted twice with same details. I applied below solution already but the issue not resolved yet.
$('#subbtn').attr("disabled", 'disabled'); //button disable
setTimeout(function () {
$('#subbtn').removeAttr("disabled")
}, 10000);
I'm just wondering what I've overlooked...
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 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.
In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.
Here is my buttons:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match">
I would like to get the information from those radio button and create an object match with it in a view:
def test(request):
user=request.user
if request.method == 'POST':
style = request.POST['style']
supporting = request.POST['supporting']
match = Match.objects.create(user=user, style=style, supporting=supporting)
return HttpResponse(test)
The thing is that I don't know JavaScript well, so I didn't find how to get the value from the button.
Then, I think I have to use:
$.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});
But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?
Thank you very much for your help.
taking my last answer, let's use your own code... in your HTML you have something like:
<form action="/sportdub/points_dub/" method="post" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
and you just have to add one hidden field per block, in your case, add 2. Your form would then match:
<form action="/page" method="post" class="form-horizontal">
<input type="hidden" id="supporting_team" value="" />
<input type="hidden" id="supporting_type" value="" />
<div class="btn-group supporting_team" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
add a jQuery helper that will set the values of those hidden fields upon buttons click:
// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
$("#supporting_type").val($(this).text());
});
$(".supporting_type .btn").click(function() {
$("#supporting_team").val($(this).text());
});
when you click the create your match the entire form will be posted to the page set as the action attribute of the form, you have to do nothing more...
If you want to submit it manually by invoking post in javascript you need to remember to prevent the form to be submitted again as that's the input type="submit" element task, you can invoke your post and serializing the entire form data, instead one by one as in your example...
like:
// when the form is submited...
$("form").submit(function() {
// submit it using `post`
$.post('/sportdub/points_dub/', $("form").serialize());
// prevent the form to actually follow it's own action
return false;
});
in your dynamic code, you will have those variables as:
supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']
and this, will be valid, no matter if you have the manually form submit script or not...
After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.
Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):
<div>
<input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
<input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
</div>
<div>
<input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
<input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
</div>
I can get which selections have been made using this:
$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();
If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:
$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();
To put this value into a hidden input, do the following:
$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());
i have the bootstrap-button.js and have this markup, but when i click on the button, it does not toggle it to show that it has been clicked. any tips as to what is missing?
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" data-toggle="button"> 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" data-toggle="button"> 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" data-toggle="button"> Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
second part of the question is how to get the data into javascript as to which button was clicked? if 1Fail was clicked, it should toggle and js code to detect that 1Fail was clicked. Thanks in advance.
The problem seems to be that you added data-toggle="button" to every check button, which is not necessary. Because you already have data-toggle="buttons-checkbox" in the outer div element .
So change it to look like this:
<div class="control-group">
<div class="btn-group" data-toggle="buttons-checkbox" data-toggle-name="checkbox_group">
<button class="btn" id="chkbox1" type="button" value="1Fail" > 1 Failure </button>
<button class="btn" id="chkbox2" type="button" value="2Fail" > 2 Failure </button>
<button class="btn" id="chkbox3" type="button" value="OtherFail" > Other Failure </button>
</div>
<input type="hidden" name="checkbox_group" value="1"/>
</div>
EDIT:
Sorry, I didn't notice your second question. When a button is clicked an active class will be added to it, so you can detect this with jQuery's hasClass method.