Develop Reference

How to enable tooltip on disabled button in javascript?

I have a disabled button and i want it to show a tooltip but change it when i enable it again. How do i get this to work i can only use HTML, javascript and css.
This is the button
<div class="right-item"><button class="button ripple" id="print" onclick="printDiv('qr-code')" disabled="disabled">Drucken</div>

Use title
function toggle() {
var button = document.getElementById('button');
if (button.disabled) {
button.disabled = false;
button.setAttribute('title', 'Enabled title');
} else {
button.disabled = true;
button.setAttribute('title', 'Disabled title');
}
}
<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>

<button disabled title="Hello">Hover on me</button>
This code will show same tool tip for both disabled or enabled button. Have a function which checks the status of button and apply the title value based on it.

You need to add Javascript when you enable button.
In jQuery:
$('#yourElementId').attr('title', 'your new title');
In Javascript:
var myBtn= document.getElementById("yourElementId");
myBtn.setAttribute('title','mytitle');

How to disable button using jquery in materialize css

I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:
html:
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
jquery:
$('#submit-btn').off().on('click', function(){
$('#submit-btn').addClass('disabled');
});

Try this
$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');
Working Demo
$(document).ready(function() {
$('#submit-btn').on('click', function() {
$(this).removeClass("waves-effect waves-light submit").addClass('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">

What about
$('#submit-btn').prop('disabled', true).addClass('disabled');

To disable the button using javascript.
eleme.classList.add('disabled');
To enable the button using javascript.
elem.classList.remove('disabled');
E.g:
let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button

to disable button you can use
$("#submit-btn").attr("disabled", "true");

Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;

How to check whether link button is disabled or not

After rendering code in browser the anchor tag is generated as
<a onclick="alert();" id="ctl00_RightContent_lnkSaveTop" title="Select Mail then Click to Send..." class="btn btn-u" data-rel="tooltip" data-container="body" data-toggle="popover" data-placement="top" data-content="Select Mail then Click to Send..." href="javascript:__doPostBack('ctl00$RightContent$lnkSaveTop','')" style="float: right" data-original-title="Send Email" disabled="disabled">
Send Mail
</a>
I have written jquery as below lines of code
$(document).ready(function () {
$('#<%= lnkSaveTop.ClientID%>').click(function () {
if ($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Basically I want that if disabled button is clicked, then the tooltip should be displayed.

Try:
if ($(this).attr('disabled') === "disabled") {
alert('No need to click, it\'s disabled.');
}
if you intend to use readonly attribute, it's the same, replace 'disabled' with 'readonly '

What you can do is have a custom data attribute on your input button which is a blank string. Then when the mouse enters the button you remove the title and place it inside of your empty data attribute and remove title, this will stop the tooltip from appearing. You then listen for the click even on the input and then move copy the text from the data attribute to the title and that should do the trick
Here is my jsFiddle : https://jsfiddle.net/44vof888/
jQuery
$(function () {
$('input').mouseenter(function () {
$(this).data('title', this.title)
this.title = '';
});
$('input').on('click', function () {
this.title = $(this).data('title');
});
});
html
<input type="button" data-title="" value="Hello" title="Half an update" readonly="readonly"></input>

Can I attach an action to a buttonclick?

If i have a button, can I attach an action to it to perform server side processing, or does it have to be wrapped in a form?
For example
<button type="submit" onClick="listco_directory_contents.js"> List </button>
Can this be made to work, or is a form required?

You can't have a type="submit" if it's not in a form, there is nothing to submit. What you can do, is having a <button id="myButton">, then attach an event to it:
var myButton = document.selectElementById('myButton');
myButton.addEventListener('click', function() {
/* do something cool */
}, false);
And the "do something cool" could be an Ajax request so you send data to the server.

You can yes but if your aiming to do server side processes i recommend the jquery way.
<!--this button uses javascript-->
<input type="button" onclick="myfunction()" value="button"/>
<!--this button uses jquery-->
<input type="button" id="myfunction" value="button"/>
<script>
//javascript function using the onclick event
function myfunction(){
alert("an action");
// or any other function u wish to
// do once the button is click
}
//jquery using the id of the button
$(document).ready(function(){
$("#myfunction").click(function(){
alert("another action");
// or any other function u wish to
// do once the button is click
});
});
</script>

You could also just include the js:
<script type="text/javascript" src="listco_directory_contents.js"></script>
and then call whatever function you need from there:
<button onClick="exampleFunction()"> List </button>
Or in case you want to do server side processing with php you can do simply:
<button onClick="$.post('http://example.com/index.php');"> List </button>

$(function(){
$(':submit').on('click',function(){
alert('hi');
})
})
also can be type=submit
$(function(){
$('input[type="submit"]').on('click',function(){
alert('hi');
})
})
DEMO

disabling submit button and enable if change was made to the textbox

I have a textbox and a submit button. I want to have the button grayed out (disabled) on pageload and when the user makes a change in the textbox whether adding text or removing text the button will be enabled and once it is saved the button will be disabled again.
<h3>Username</h3>
#Html.TextBoxFor(m=>m.username)
<button class="btn btn-small savebtn" type="submit" value="User Name">Save</button>
Now the issue i am having is how to properly insert this script into my view. This is my current view:
#model Project.Models.UsernameModel
#using (Html.BeginForm("_UsernamePartial", "Account")) {
<h3>Username</h3>
#Html.TextBoxFor(m=>m.Username)
<button class="btn btn-small savebtn" type="submit" value="User name">Save</button>
do i add the script like this at the bottom after the tag:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
$(".savebtn").attr('disabled', 'disabled');
$("#UserName").keyup(function () {
$(".savebtn").removeAttr('disabled');
});
$(".savebtn").click(function () {
$(this).attr('disabled', 'disabled');
});
});
</script>

If I understand your requirements correctly, you want something like this:
$(document).ready(function () {
//Disable Save Button On Page Load
$(".savebtn").attr('disabled', 'disabled');
//When User Name changes, enable Save Button
$("#UserName").keyup(function() {
$(".savebtn").removeAttr('disabled');
});
//Disable Save Button once clicked
$(".savebtn").click(function() {
$(this).attr('disabled', 'disabled');
});
});
And here is a sample JS Fiddle.