Change value of bootstrap button onclick

Question

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.

Vince · Accepted Answer · 2015-10-29 19:37:36Z

1

With jQuery:

You can change an elements html with .html()
You can change an elements styles with .css()
For changing classes, you can use .addClass() and .removeClass()

There are many more jQuery functions for DOM manipulation.

I'd suggest taking a look. jQuery API

answered Oct 29, 2015 at 19:37

Vince

1,8512 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wild Beard · Accepted Answer · 2015-10-29 19:42:15Z

1

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

edited Oct 29, 2015 at 19:42

answered Oct 29, 2015 at 19:37

Wild Beard

2,9371 gold badge14 silver badges24 bronze badges

1 Comment

matt. Over a year ago

Press, a suggestion -- I would add the markup for the button in the snippet or just change it to a standard code block, it's a bit deceiving when you click the run snippet button and nothing shows up.

Collectives™ on Stack Overflow

Change value of bootstrap button onclick

2 Answers 2

Comments

jsFiddle Example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related