We Keep Coding

How to change an empty star glyphicon button to star glyphicon button onclick with JS?

This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.
<script>
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
</script>
<button class="btn btn-default">
<span class="glyphicon glyphicon-star-empty"></span>
</button>

You can use this jQuery code.
$(document).ready( function() {
$('.btn').click(function(){
$(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
});
})
You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.

How to change submit value on click

I have a simple form
HTML
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>
The request time when submitting may sometimes be long (more than 30s, bc of business logic on big file...)
I want to change the value of the button after user has clicked on it. The objective is to display a font-awesome loader instead of the initial text (<i class="fas fa-spinner fa-pulse"></i>). There is the jQuery snippet I use to achieve this...
jQuery
$("#upload-fes-btn-control").click(function () {
$(this).attr('value', '<i class="fas fa-spinner fa-pulse"></i>');
});
I'm facing an error due to this code in my Controller
A potentially dangerous Request.Form value was detected from the client
Controller
if (Request.Form["upload"] != null)
{
//Logic with ViewModel...
}
How can I change the text displayed in the button from text to fa image loader without throwing that error ?

use this code $(this).html('<i class="fa fa-spinner fa-pulse"></i>');
$("#upload-fes-btn-control").click(function (e) {
e.preventDefault();
$(this).html('<i class="fa fa-spinner fa-pulse"></i>');
//example after page load
setTimeout(function(){
$("#upload-fes-btn-control").html('');
$("#upload-fes-btn-control").html('Contrôler');
}, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="#Url.Action("Controler", "FES")" method="POST">
<button name="upload" type="submit" id="upload-fes-btn-control" class="btn btn-danger">Contrôler</button>
</form>

How to capture two same id but different class in addEventListener

first of all, thank you for your time to read this question, and two things, I'm using ES5 and I don't use jQuery.
Right now I'm struggling a lot to figure what's the correct solution for the addEventListener, because for some reason it does not trigger for the second button which is only for the mobile screen dimensions, the problem is that the second button have the same id but different class, for example this:
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
{/* Desktop screen button */}
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
{/* Mobile screen button */}
<button id="buy-now" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>
Where I am trying to trigger the second button but it does not where I don't understand why it does, if the id is the same, should not matter, so I'm trying to figure how to trigger from the first button if it's clicked and also with the second if it's clicked, but I'm out of ideas...
var button = document.getElementById('buy-now');
if (!button) {
return;
}
button.addEventListener('click', function trackAddToCart() {
// more code for the event
}
I thought an idea to capture the attribute of the button, but it works in the first button but not for the second one:
var button = document.getElementById('buy-now');
var att = button.getAttribute('class');
button.addEventListener('click', function() {
console.log('class ' + att); //shows: class: btn btn-lg hidden-sm-down btn-primary
console.log('button class? '+ button); //shows: button element: [object HTMLButtonElement]
});
But when I click the second button... does not trigger or happening nothing, not sure why... and I can't change the id value (which it should be easy but I can't "company standard")
Can anyone help me to have an idea how to capture and trigger the event for the second button ??

The attribute id must be unique in a document. You can use attributeStartsWith selector or class with querySelectorAll(). Then loop through all the button to attach the event (click) individually:
//var button = document.querySelectorAll('.btn.btn-primary');
var button = document.querySelectorAll('[id^=buy-now]');
button.forEach(function(btn){
btn.addEventListener('click', function() {
console.log('class ' + this.classList);
console.log('button class? '+ this.id);
});
});
<div class="product-bg-container product-general-info variation-info">
<input type="hidden" name="sku" value="Something-15892290" id="selected-option">
<button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
Add to Cart
</button>
<button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary">
Add to Cart
</button>
</div>

nextElementSibling seems working in this case.
var btn1 = document.getElementById("btn");
var btn2 = btn1.nextElementSibling;
btn1.addEventListener("click",function(e){
console.log("btn1");
});
btn2.addEventListener("click",function(e){
console.log("btn2");
});
<div>
<button id="btn" class="btn1">butotn 1</button>
<button id="btn" class="btn2">butotn 2</button>
</div>

How to change button in twitter bootstrap using jquery

I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers

You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");

In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");

Bootstrap popover on injected html button

I have injected a button like this:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" /> ');
but can't get a Bootstrap 3.0 Popover to render next to it when I click. Tried this inside $document.ready():
$(document).on('popover', '#pink', function(e){
e.preventDefault();
//console.log('clonk');
});
but nothing. Any ideas?

You can now use the selector option when creating dynamic popovers:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" rel="popover" title="A Title" data-content="This is the content of the popover" />');
$('body').popover({
selector: '[rel=popover]'
});
$(document).on('show.bs.popover', function(e) {
console.log('clonk');
});
Fiddle here