Develop Reference

How to change the btn style using javascript in asp.net?

I have a written javascript function that will change the button class type from btn btn-success to btn btn-danger on click. How can I do so? Basically, I want to toggle the btn class everytime.
<td>
<div id="btn_modal_Edit" class="btn btn-success" runat="server">
<a href='CreateAccount.aspx?Id=<%# Eval("ID")%>&RoleName=<%# Eval("RoleName")%>'>Edit</a>
</div>
<div id="btn_modal_Status" class="btn btn-success" runat="server">
<a data-toggle="modal" data-target="#myModal" onclick="fun(<%# Eval("ID")%>)">Status</a>
</div>
</td>
function fun(id)
{
document.getElementById('<%= hfId.ClientID%>').value = id;
document.getElementById('btn_modal_Edit').className = "btn-danger";
document.getElementById('btn_modal_status').className = "btn-danger";
}
This function fails because it cannot find document.getElementById('btn_modal_Edit') and document.getElementById('btn_modal_status').
Any ideas to fix this?

Every thing is working fine with this:
document.getElementById("btn_modal_Edit").className = "btn-danger";
Working Fiddle

Trying to generate a button-group with Bootsrap and AngularJS to redirect to different URLs

I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!

Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>

Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.

I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps

Disable button if only one div

I have two buttons. One where i clone a div (button-add) and one where I remove a div (button-remove).
I want to disable the remove-button when I only have one div.
So for multiple divs, it looks like this:
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox"></div>
<div class="copybox"></div>
<div class="copybox"></div>
...and when there's only one div, I want it to look like this:
<button type="button" class="btn btn-default btn-lg button-remove" disabled>-1</button>
<div class="copybox"></div>
I use jQuery 1.11.3

Here you go. Hope this is what you need.
$('.btn').on('click',function(){
if($(this).text()=="+1")
{
$('.button-remove').prop('disabled',false);
$('div.copybox:first').clone().appendTo('body');
}
else
{
$('div.copybox:last').remove();
}
$('div.copybox').length==1?$(this).prop('disabled',true):$(this).prop('disabled',false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-lg button-add">+1</button>
<button type="button" class="btn btn-default btn-lg button-remove">-1</button>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>
<div class="copybox">Copy</div>

Try using the $("div.copybox").length that DontVoteMeDown commented and then set an ID for the button remove. Once you do that, you can add a function to hide the button with this code.
document.getElementById(buttonID).style.display = 'none'
If later you decide to enable it again, then you can also add another if statement and then the code for that would be block instead of none

Redirect to new page on button onclick in javascript

I have many buttons inside of webpage like this.
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner();">more</div>
What i am trying to do is call function clickinner() on button onclick event. I tried to grab the button element by class name and change the target url.
The javascript code is as follows.
<script>
function clickinner(){
var mybtn=document.getElementsByClassName('btn');
mybtn.onClick="location.href='about-us.html'";
};
</script>
I don'twant to grab the element by Id so that i have to assign unique id each time. However whenever i click on any of buttons, the target link is not working.
Please help me.

The clicked button can be accessed by using this in the clickinner function, no need to get it by class name:
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
Furthermore, you can just directly redirect to the 'about-us' page, since you're already in the click event. So ...
<script>
function clickinner(target) { // Target refers to the clicked element
location.href='about-us.html';
};
</script>
... is enough.
If you need to go to different pages based on which class the button has, you can do something like:
function clickinner(target) {
if(target.classList.contains('mycustom_btn')) {
location.href = 'another-page.html';
} else {
location.href='about-us.html';
}
};

Add this as parameter to your function and change the location correctly
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
<script>
function clickinner(mybtn){
// Do your stuff here with the clicked button
location.href='about-us.html';
};
</script>
http://jsfiddle.net/asv548g2/

Working fiddle solution
HTML:
<div id="button">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
JS:
var button = document.getElementById('button');
button.addEventListener('click', function(){
alert('only 1 button clicked');
window.location = 'about-us.html';
});
var buttons = document.querySelectorAll('.btn');
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click', function(){
alert('each button clicked');
window.location = 'about-us.html';
});
}

Try this sample
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
<script>
function clickinner() {
window.location.href = 'secondPage.html';
}
</script>
</head>
<body>
<div class="btn btn-sm btn-success mycustom_btn"
onClick="javascript:clickinner()">more</div>
<div class="btn btn-sm btn-success mycustom_btn1"
onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2"
onClick="javascript:clickinner();">more</div>
</body>
</html>

why does my Bootstrap javascript not work?

I have looked at the other questons and double checked. My javascript resources are in order, there are no path problems, i even have jquery items working on my page. I thew this code right above the "Social Media Icons" heading for the sake of testing and still nothing.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
$(document).ready(function () {
$('#section-nav a').tooltip();
$(".tab").tabs();
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top")
.addClass("ui-corner-bottom");
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
$('.navbar-toggle').click(function () {
var target = $('#navigation .shopbar');
if (target.hasClass('border-bottom')) {
target.removeClass('border-bottom');
} else {
target.addClass('border-bottom');
}
});
});

From the Bootstrap docs.. (http://getbootstrap.com/javascript/#tooltips)
"For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself."
So you need to add this jQuery..
$("[data-toggle=tooltip]").tooltip();
To initialize the Tooltips.

Change data-original-title to title, then:
$('#section-nav a').tooltip();