CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Albert MN.
Albert MN.

Reputation: 730

Change value of bootstrap button onclick

I want to change the content of a button when clicked - specifically I want it to change to a "block" state where it can't be clicked, while I want to give it a Glyphicon.

What I want added:

<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>

and the text "Downloaded" - I wish for this to erase the previous text and Glyph icon, and I've found this little peace of jQuery that changed the text on click.

<script>
$(document).ready(function(){
$('#download-btn').click(function() {
 $("#download-btn").text('Downloaded');
})
});    
</script>

but it wouldn't allow me to add any HTML code, it just outputted it as pure text.

And last, I want to add the following style btn-block to the button.

This is the button before being clicked;

<button id="download-btn" type="button" class="center btn btn-primary">
    <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>

After click, the jQuery above changed the text to "Downloaded", but I can't seem to figure out how I add style, and code, to a tag.

Upvotes: 0

Views: 2498

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

Use .html() to apply/override HTML that is inside the element you are selecting.

You can disable buttons in a few ways. I used .attr() or you can use .prop().

$('#download-btn').click(function() {
   $(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true); 
});

jsFiddle Example

Upvotes: 1

Vince
Vince

Reputation: 1851

With jQuery:

There are many more jQuery functions for DOM manipulation.

I'd suggest taking a look. jQuery API

Upvotes: 1

Related Questions