How to disable HTML button on the click using Javascript? - javascript

Once my button gets clicked, it should get disabled and never be clicked again until the page is refreshed. Below is my code:
<html>
<head>
<script type="text/javascript">
function myButtonClicked()
{
alert("Has myButton got disabled? I need solution for this.");
}
</script>
</head>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked()">Click ME</button>
</body>
</html>
Before calling myButtonClicked function, it should get disabled. Actually, I want to write a PHP script in this function which will fetch some data from database which will take some time in real environment. That is why I want to disable the button. How do I achieve that?

You can pass this to your function:
<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>
then you can use:
function myButtonClicked(el)
{
el.disabled = true;
}
Fiddle Demo
with jQuery you can use .click() along with .prop():
$('button').click(function() {
$(this).prop('disabled',true);
});
Fiddle Demo

function myButtonClicked()
{
$(this).prop('disabled', true);
}
Is it helping?

Add -
function myButtonClicked()
{
alert("Has myButton got disabled? I need solution for this.");
this.disabled = true;
}

Give your element as an argument within calling teh function
<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>
And set the element attribute "disabled" to true
function myButtonClicked(obj) {
obj.setAttribute("disabled", true);
}
fiddle: http://jsfiddle.net/quJX8/

JSBIN
$("button").click(function() {
$('#'+this.id).prop('disabled', true);
});

You can disable like this, this is self explainable:
<script>
function myButtonClicked(id)
{
alert("Has myButton got disabled? I need solution for this.");
$("#" + id).attr("disabled", true);
}
</script>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this.id)">Click ME</button>
</body>

There are simpler ways than rewriting your function and passing "this". Just use "this" in your onclick attribute:
<button type="button" id="myButton1" onclick="this.disabled=true;myButtonClicked()">Click ME</button>
That will disable it, but it isn't necessarily that visibly obvious on the form. I like to use:
<button type="button" id="myButton1" onclick="this.style.visibility='hidden';myButtonClicked()">Click ME</button>
Which "disappears" it, but it still holds its place in the form.
If you don't need the placeholder, you can also use:
<button type="button" id="myButton1" onclick="this.hidden=true;myButtonClicked()">Click ME</button>

Related

How to target a button from a group of buttons in JQuery without a class name or id

How can I target a button from a group of buttons without using a class or id, just n JQuery
Example:
<body>
<button>Click Me</button>
<button>Click Me</button>
<button class="food">Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<input type="text">
<!--
<script src="ajax.googleapis.com/ajax/libs/jquery/3.6.0/…>
<script src="index.js"></script>
-->
</body>
With JQuery this would only be possible if the button's had unique innerText or innerHTML that you could then predict.
Using my example HTML from below:
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
<button>Button4</button>
</div>
You would need to use JQuery to grab all tags, and then filter that by their innerHTML or innerText depending on what is inside the button tag.
See the below JS:
// Assuming you want 'Button 1'
for(let el of $("button")){
if(el.innerText === 'Button1') el.addEventListener() // Then from here do the rest
}
There many ways, You can use onclick method inline Html. A crude way---
<script>
function function1(){
alert ('Button1')
}
function function2(){
alert ('Button2')
}
function function3 (){
alert ('Button3')
}
</script>
</head>
<body>
<button onclick="function1()">Button 1</button>
<button onclick="function2()">Button 2</button>
<button onclick="function3()">Button 3</button>
</body>

How to get the pressed button in a function

Is it possible to create a function that returns which button was pressed, even though all buttons have the same class?
It is important that the classes of the buttons must not be changed.
<html>
<body>
<button class="button">text</button>
<button class="button">text</button> //this button was clicked
<button class="button">text</button>
</body>
</html>
The code is only for visualisation I know it isn't right.
function myfunction(){
console.log(clickedbutton)
}
What I have to fill in so the code runs?
Sorry for the bad code i don't know how to make it more clearly.
Hello and happy new 2021!
I think this might be a slight duplicate of this.
As Gabriele said, you can get the HTML element by using the target. If you need some logic for differentiating the structures (using them in some state later on), you would need to assign an id or a different class.
Delegate
document.getElementById("buttonDiv").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("button")) console.log(tgt.textContent,"clicked")
})
<div id="buttonDiv">
<button class="button">text 1</button>
<button class="button">text 2</button>
<button class="button">text 3</button>
</div>
When an event happens and the handler that is bound to that event for that element is called, it is passed the event as the first parameter. And one of the properties of the event is the target which points to the element that triggered the event.
so
function clickHandler(event) {
const clickedElement = event.target;
console.log(clickedElement.textContent);
}
document
.querySelectorAll('.button')
.forEach(button => button.addEventListener('click', clickHandler))
<button class="button">text 1</button>
<button class="button">text 2</button>
<button class="button">text 3</button>
If you assign a function to the onClick event of a button (or multiple buttons), you can receive the event info as an argument, like so:
function myfunction(e) {
console.log(e.target.id)
}
<!DOCTYPE html>
<html>
<body>
<button id="button-1" class="button" onclick="myfunction(event)">text</button>
<button id="button-2" class="button" onclick="myfunction(event)">text</button>
<button id="button-3" class="button" onclick="myfunction(event)">text</button>
</body>
</html>
You can make use of data-id for getting index of button clicked.
const button = document.querySelectorAll(".button");
function getClickedIndex(evt) {
console.log(evt.target.getAttribute("data-id"));
}
button.forEach(button => button.addEventListener('click', getClickedIndex))
<html>
<body>
<button class="button" data-id="1">text</button>
<button class="button" data-id="2">text</button>
<button class="button" data-id="3">text</button>
</body>
</html>

Count Click Only Once

Here is my code:
<html>
<body>
<script>
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
</body>
</html>
I'm trying to use this example I found:
<body>
<h1>Single click JS Button</h1>
<button type="submit" onClick="this.disabled = true; return true;">Submit</button>
</body>
I'm confused on how to use the onClick="this.disabled = true; part because for my code I already have the function called when I wrote onClick. I used onClick="clickMe().
Are you allowed to have onClick twice? I want to use the onClick="this.disabled = true; because I don't want to keep increasing the amount of clicks if the user clicks the button again. If they click it once I only want to increment once and then disable the button or just not increase the count after.
Note on possible duplicate
I do not think this is a duplicate of the other question, as that is jQuery click() only once, but I'm using JavaScript. I have not learned jQuery (jQuery click() only once)*
Please take a look here:
var clicks = 0;
function clickME(el) {
el.disabled = true;
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
addEventListener option once:true - looks like a perfect option in your case.
More explanations in the code
var clicks = 0
function clickME(event) {
clicks += 1
document.getElementById("clicks").innerText = clicks // innerText is more suitable in this case
if (event.target.className.includes(`auto-disable`)) {
event.target.disabled = true // auto disabling if you need it
}
}
document.querySelectorAll(`button`) // select all buttons
.forEach( // loop through the elements
// addEventListener with options once:true. once option designed exactly for your purposes, to fire event only once
el => el.addEventListener(`click`, clickME, {once: true})
)
<p>Clicks: <a id="clicks">0</a></p>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button" class="auto-disable">Click me</button>
<button type="button" class="auto-disable">Click me</button>

Multiple onclick events in Javascript/html

How can I create multiple onclick events for my html buttons? The code I have right now only implements it for one button. How can I get the script to change the image src to different images when the other buttons are clicked. I tried using different functions for each button but that didn't work.
*
<body>
<button class="button" onclick="myFunction()" ><strong>Objectives</strong></button>
<button class="button"><strong>Mission</button></strong>
<button class="button"><strong>Chemistry Vision</strong></button>
<button class="button"><strong>Environment Vision</strong></button></br>
<img id="myImg" src="http://image.png" >
<script>
function myFunction() {
document.getElementById("myImg").src = "http:Objectives.png";
}
</script>
</body>
*
You should pass parameter to the function, something like this:
<body>
<button class="button" onclick="myFunction('Objectives')" ><strong>Objectives</strong></button>
<button class="button" onclick="myFunction('Mission')"><strong>Mission</button></strong>
<button class="button" onclick="myFunction('Chemistry)"><strong>Chemistry Vision</strong></button>
<button class="button" onclick="myFunction('Environment')"><strong>Environment Vision</strong></button></br>
<img id="myImg" src="http://image.png" >
<script>
function myFunction(imgName) {
document.getElementById("myImg").src = "http:" + imgName + ".png";
}
</script>
</body>

How to get value of a button type button with jQuery?

I use instead of
I simply wish to get the value/content of the selected/active button, with jQuery, on click button and onload page.
These are my buttons:
<button type="button" class="green test">Button 1</button>
<button type="button" class="green active test">Button 2</button>
I know I must to use $(".test:button") selector, but I don't know how to get the button content
Use .text()
$(document).ready(function(){
alert($('.test[type="button"]').text());
$('.test[type="button"]').on('click',function(){
alert($(this).text());
});
});
DEMO
Edit
var text = $('button.active').text();
Edit
var redsText = $('button.red.active').text();
var greensText = $('button.green.active').text();
$('button').text();
or
$('button').html();
Try
$('button.test').click(function() {
alert($(this).text());
});
WORKING DEMO
<head>
<script type="text/JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<button type="button" class="green test">Button 1</button>
<button type="button" class="green active test">Button2</button>
<script>
$(function(){
$(".green").click(function(){
$(this).addClass('active');
$(this).siblings().removeClass("active")
alert($(this).text());
})
})
</script>

Categories