How to enable tooltip on disabled button in javascript? - 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');

Related

when button is disable then also on click event call

once the button clicked I have a disabled button and on page load, I get the status of the button and then enable and disable the button according to requirement.it's work properly but I give an on-click event to the button. when the button is disabled then also when I click the button javascript call a method.
i have tag as a button.
how I can handle when button is disabled raise event stop.
thank you in advance.
<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>
$("#check_status_api").click(function(e){
console.log('my ajax call code ')
})
$(document).ready(function(){
//on page load get status of my batch if it's running then button disable property add
if ('runnig' == 'runnig'){
$("#check_status_api").attr( "disabled", "disabled" );
}
})
try this:
$("btn btn-info btn-sm").prop('disabled', true);
or you can try adding a css class on click that disables the button:
.disabled {
pointer-events: none;
}
or document.getElementById("check_status_api").disabled = true;
Try this:
const myBtn = $('#check_status_api')
myBtn.click(function(e){
if (!myBtn.is('[disabled=disabled]')) {
console.log('my ajax call code ')
}
})
$(document).ready(function(){
//on page load get status of my batch if it's running then button disable property add
if ('runnig' == 'runnig'){
myBtn.attr( "disabled", "disabled" );
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>

textarea hide buttons onclick

I have a textarea for the user to type something and it has a cancel and a submit button as part of it.
How can I make it so that the cancel and submit button only appears when the user clicks inside the textarea? (using javascript, no jquery please)
I have attempted using this javascript function:
function setButtons(writingtext) {
if (writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}
else {
document.getElementById('cfm').style.display = 'none';
document.getElementById('cancel').style.display = 'none';
}
}
When the user clicks the text area, it would be onClick="setButtons(True)" -> displays the buttons.
I'm not sure if this is the right approach here. Sorry, really new to this.
Any help would be appreciated!
You have control over your html you can do it with just css sniping the next sibling at :focus like this:
div {display:none;}
textarea:focus + div {display:block;}
<textarea name="" id="" cols="30" rows="10"></textarea>
<div>
<input type="submit">
<input type="submit">
</div>
This is only a simple example to show the buttons on focus. If you want to hide them, I think you will be able to manage that solution.
If all you want to do is show the buttons when the text area is focused, use the CSS-only solution. However, I'm guessing you'll want to keep them for a bit or do some extra pre-processing before the submit, in which case you should use the javascript option.
document.querySelector("#textarea").addEventListener("focus", function() {
document.querySelector("#submit").style.display = "block";
document.querySelector("#cancel").style.display = "block";
});
button {
display: none;
}
<textarea id="textarea"></textarea>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>
You can just assign an id to the textarea for example text and then use
document.getElementById('text').addEventListener('focus', function(){
document.getElementById('cfm').style.display = 'block'
document.getElementById('cancel').style.display = 'block'
})
// Hide when blur (when not focused)
document.getElementById('text').addEventListener('blur', function(){
document.getElementById('cfm').style.display = 'none'
document.getElementById('cancel').style.display = 'none'
})
You should use
onfocus="setButtons(this)" instead of onClick
function setButtons(writingtext) {
document.getElementById('cfm').style.display = 'block';
document.getElementById('cancel').style.display = 'block';
}

How do I hide this paragraph tag?

I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>
Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}

HTML + JS How to change/unchange text onclick

I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok
I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/
You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});
You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.
You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>
Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});
I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).
You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>

Changing the state of a button HTML

I have this code in the body of my HTML which acts as a show/hide button and it is styled via CSS. However I only have the option to title the button once i.e 'Read more.." but after the button has been selected I would like it to change to 'Read less'. Here is the code I am using:
<button title="Click to show/hide content" type="button"
onclick="if(document.getElementById('spoiler') .style.display=='none')
{document.getElementById('spoiler')
.style.display=''}else{document.getElementById('spoiler')
.style.display='none'}">Read more...
</button>
Any help would be greatly appreciated, thanks in advance.
Try:
HTML:
<button title="Click to show/hide content" type="button" onclick="func()" id="but">Read more...</button>
<div id="spoiler" style="display:none">TEXT TEXT TEXT</div>
JS:
function func(){
if(document.getElementById('spoiler') .style.display=="none"){
document.getElementById('spoiler').style.display="block";
document.getElementById('but').innerHTML="Read less...";
}
else{
document.getElementById('spoiler').style.display='none';
document.getElementById('but').innerHTML="Read more...";
}
}
DEMO
Firstly, get out of the habit of bundling JavaScript inline as HTML attributes. Look into DOM-scripting centrally from your JS scripts rather than in your HTML.
The essence of what you need to do is to query something each time the button is clicked, and act accordingly. The visibility of the spoiler area, for example.
(Note, you will need to give your button an ID, e.g. mybutton, for this:)
document.querySelector('#mybutton').addEventListener('click', function() {
var
spoiler = document.querySelector('#spoiler'),
showing = spoiler.style.display != 'none';
spoiler.style.display = showing ? 'none' : 'block';
this.textContent = 'Read '+(showing ? 'more' : 'less');
}, false);
So on click, we interrogate the display style of #spoiler. If it's showing, we hide it, and if it's hidden, we show it, updating the button text accordingly.
HTML:
<button id="btn" title="Click to show/hide content" type="button" onclick="readmore()">Read More...</button>
<div id="spoiler" style="display:none">spoiler text</div>
JS:
function readmore(){
var btn = document.getElementById('btn');
var spoiler = document.getElementById('spoiler');
if(spoiler.style.display=='none') {
spoiler.style.display = '';
btn.innerHTML = "Read Less ...";
} else {
spoiler.style.display = 'none';
btn.innerHTML = "Read More ...";
}
}
Here is a DEMO at jsFiddle.

Categories

Resources