how to disable a button permanently after clicking it ?it should remain disabled after refreshing the page also.But after refreshing the page the button is enabled again.how to do this??
its really easy , just change disabled property to true..
<script type="text/javascript">
function disableButton(btn){
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
</script>
with HTML it would look smth like this
<!--JavaScript - Disable Button after Click using JavaScript Function.-->
<html>
<head>
<title>JavaScript - Disable Button after Click using JavaScript Function.</title>
<script type="text/javascript">
function disableButton(btn){
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Disable Button after Click using JavaScript Function.</h1>
<p><input type="button" id="btn1" value="Click to disable button." onclick="disableButton(this)"</p>
</body>
</html>
Related
This question already has answers here:
How can I prevent refresh of page when button inside form is clicked?
(16 answers)
Closed 4 years ago.
there have been similar topics posted however none I found solved my problem.
Here's a sample html page with some javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
window.onload = function() {
var fileDlg = document.getElementById('fileDialog');
// this should detect onChange, but not working
fileDlg.onchange = (e) => {
window.alert('Changed: '+e.target.value);//
//document.getElementById('frm_img_upload').submit();
}// eo filedlg.onchange
}//eo window onload
</script>
</head>
<body>
<form id="frm_img_upload" name="frm_img_upload" method="post" enctype="multipart/form-data">
<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
<button onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
</form>
</body>
</html>
The idea was to hide the super-annoying input file type element, and create a button with an onclick, which will click the invisible input. This works fine and dandy, however, once the visitor has selected a file and the dialog closes, I want to submit the form, rather than have another annoying button to press.
The onchange is not firing.
I'm not using jquery for this, just good ol javascript.
Any ideas?
Thanks.
Your button is submitting the form as soon as the dialog closes, since the default is type="submit", so the onchange doesn't get a chance to run.
Change it to type="button" and then you'll see your alert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
window.onload = function() {
var fileDlg = document.getElementById('fileDialog');
// this should detect onChange, but not working
fileDlg.onchange = (e) => {
window.alert('Changed: '+e.target.value);//
//document.getElementById('frm_img_upload').submit();
}// eo filedlg.onchange
}//eo window onload
</script>
</head>
<body>
<form id="frm_img_upload" name="frm_img_upload" method="post" enctype="multipart/form-data">
<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
<button type="button" onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
</form>
</body>
</html>
In my options page, in my chrome extension, I want to read the user input when the user enters their value and clicks the submit button.
options.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<h1 style="font-family:Raleway;font-weight:200;text-align:center;font-size:50px;color:white;">Themes</h1>
<input type="number" id="day" value="2" class="day">
<button id = "button1">Submit</button>
<script src="options.js"></script>
</body>
</html>
options.js
...
document.getElementById("button1").addEventListener("change", function(e) {
var day = document.getElementById("day").value; // get the current value of the input field.
alert(day);
});
You are listening for change not click.
addEventListener("click", function(){})
You're currently only running your function when the buttons value changes (and since a button has no value, this will never fire)
Hey I am new to php and other stuffs. Now I am trying to make automatic bill creating page. But the problem is the background is not visible in print preview.
When I press the print button on the top left corner of the php page it shows a page without background image, at the same time I don't need print button in the print preview page. If I use <img> tag to insert image I can't able to display datas above the image.
My code
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
window.print();
}
</script>
</head>
<body background="Geekay.jpg">
<input type="button" value="Print" onclick="printpage();">
<br><br>
<br><br>
<br><br>
Datas....
</body>
</html>
For printing datas along with background image in print window click more settings (in case of google chrome). Then check background graphics. For not showing print button, I updated my code as given below
<html>
<head>
<title>New Page 1</title>
<script language="javascript">
function printpage()
{
document.getElementById('print').style.display = 'none';
window.print();
}
</script>
</head>
<form name="bill">
<body background="Geekay1.JPG">
<div id="print" style="display:block">
<input type="button" value="Print" onclick="printpage()">
</div>
<br><br>
<br><br>
<br><br>
Datas....
</body>
</form>
</html>
I am trying to use bootstrap's loading state change (http://getbootstrap.com/javascript/#buttons-stateful) to disable button upon clicking - to prevent multiple submits on client side (on server side, I got this covered). This is the code that I am testing it with.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form action = "http://slowLoadingPage/">
<button type = "button">This one works well</button>
<button type = "submit">Submit me!</button>
</form>
<script type = "text/javascript">
$(function () {
$('body').on("click", "button", function(e) {
$(this).button("loading");
});
});
</script>
</body>
</html>
It works like a charm in FF and Chrome however in Safari, clicking on the button will trigger submitting the form however it will not change the state (class disabled is added however state disabled is not).
Is there any way to make this work in Safari, please?
Thank you!
EDIT 1
Decided to change the JS a bit, instead of watching for click events, I added submit event to form (to catch other ways of submitting form as well). The code now looks as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<form action = "http://localhost/test.php">
<input type = "text" />
<button class = "btn btn-default" type = "submit">Submit me!</button>
</form>
<script type = "text/javascript">
$(function () {
$("form:not([data-loading-state=disabled])").submit(function() {
setTimeout($.proxy(function () {
var inputs = $(this).find(":input");
inputs.attr("data-form-disabled", 1);
inputs.prop("disabled", true);
inputs.addClass("disabled");
$(this).find("button, input[type=submit]").each(function (i, el){
func = $(el).is('input') ? 'val' : 'html';
$(el).attr("data-loading-text", $(el)[func]());
$(el)[func]("Loading...");
});
}, this), 0);
});
});
</script>
</body>
</html>
Again, it works perfectly in FF and Chrome (inputs are disabled and button's text changes upon clicking on the button). However in Safari, it doesnt work as good - inputs are "disabled" but they do not look disabled and button's text does not change. I tried to recreate this on jsfiddle but submitting forms doesnt work well there so I created a demo on my own website = http://demo.jacon.cz/test.html. Upon clicking on the button in FF and Chrome, button's text will change to loading... and after 3 secs, the form will get submitted. In Safari, it doesn't work.
I am learning javascript and we have been given the task of changing image / colour of paragraph from the click of the button. My code works but I had to add an alert() to stop it to show this as it reverts to default image/colour as soon as it runs.
function changeImage() {
var myTag=document.getElementById("imageColour");
myTag.src = "images/white.jpg";
var x = document.getElementById("demo");
x.style.color = "red";
// Had to add this to see change
alert("Has reached changeImage()");
}
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script.js"></script>
<title>Exercise 3</title>
</head>
<body>
<h3>Exercise 3</h3>
<img src="images/black.jpg" id="imageColour"/>
<form>
<button type="submit" id="mySubmitButton">Change Colour</button>
</form>
<p id="demo">Click the button to change the colour of this paragraph.</p>
</body>
</html>
<!--javascript-->
<script type="text/javascript">
document.getElementById("mySubmitButton").addEventListener("click", changeImage);
</script>
Any help appreciated.
You are submitting a form. That causes the page to be reloaded and reset.
Use type="button" (and you might as well remove the form entirely while you are at it) or call preventDefault on the event object (the first argument to changeImage).