Why is the following method not functioning as intended? I aim to have the JavaScript code execute when the button is clicked once, and then have the button disabled and 'grayed-out' so it cannot be clicked again.
$(document).ready(function() {
$('#contact-submit').on('click', function(e) {
e.preventDefault();
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
var text = 'xxxxxxxxxxxxxxxxxxxxxxxxx'
$.ajax({
data: 'payload=' + JSON.stringify({
"text": text
}),
dataType: 'json',
processData: false,
type: 'POST',
url: url
});
});
});#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button:disabled[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #ffffff;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Call</button>