// add img in hidden state then fade
// copy title and alt attributes from small img to new one
jQuery(document).ready(function() {
jQuery(".load-on-click").click(function() {
jQuery(this).text("Loading").removeClass("btn-default, btn-primary, btn-success, btn-info, btn-danger, btn-link").addClass("btn-warning");
//change btn class to btn warning
});
});<html id="ntc-web-my" lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema#"
class="js">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://failover.northtyneside.gov.uk/sites/default/files/favicon_0.ico" type="image/vnd.microsoft.icon">
<meta name="generator" content="Drupal 7 (https://www.drupal.org)">
<link rel="canonical" href="https://failover.northtyneside.gov.uk/facility/938">
<link rel="shortlink" href="https://failover.northtyneside.gov.uk/node/938">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_y5V-74fl2u3TPnO7Vzl0srF2_LEAmcANj4_-6qPJyxk.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_6wBOCOFxVtHYT2hpGMbeDQ312q-jxDxgASHWdm3WYi4.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_gwWRemXWt3xYLQ0FjqVRBTD7b5PQL91v8BAu8J2qKjk.css" media="all">
<style>
#backtotop {
left: 10px;
}
</style>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_-U-YIgj5NQz73QbwdRP7JBqbYW5aUP8ZJhZOII6t4oY.css" media="all">
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" media="all">
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all">
<!--[if lt IE 10]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="all" />
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/overrides.min.css">
<link rel="stylesheet" href="https://failover.northtyneside.gov.uk/sites/default/files/css-overrides/legacy-overrides.min.css">
<button class="btn btn-primary load-on-click form-submit ajax-processed" type="submit" id="edit-find" name="op" value="Find">Find</button>
<!-- Standard button -->
<button type="button" class="btn btn-default load-on-click form-submit ajax-processed">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary load-on-click form-submit ajax-processed">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success load-on-click form-submit ajax-processed">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info load-on-click form-submit ajax-processed">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning load-on-click form-submit ajax-processed">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger load-on-click form-submit ajax-processed">Danger</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>Hi, I'm writing a function to change a specific class of a button when clicked on, by changing the text to "Loading" and changing the class to 'btn-warning' to make the color of the button orange. However when trying to override the 'danger' button, it won't change the colour from red to orange. Does anyone know why it does this or how to fix it?
