I have to disable a button when the page is loading.
How do I enable the button after fully loading the page, using jQuery or JavaScript?
Disable any button from the beginning:
<input type="button" disabled="disabled" />
And add the enable to window ready function
$(document).ready(
function(){
$("input[type=button]", "<input[type=submit]", "input[type=reset]").each( //add more selector here if you want
function(){
if($(this).attr("disabled"))
$(this).attr("disabled", false); //enable button again
}
);
}
);
Or you can do
<body onload="load()">
and
<script type="text/javascript">
function load()
{
document.getElementById("buttonID").disabled=true;
}
</script>
add a disabled property for the button and in the script, document ready function remove disabled function.
$("#buttonID").prop('disabled',false)
This is based on #Bang Dao's answer but using native JavaScript.
Disable the button from the beginning:
<button id="button" disabled>A button</button>
And then listen for the DOMContentLoaded event on document:
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('button');
button.disabled = false;
});
Related
hello im trying to get a script to run so that a link auto clicks after certain amount of time
on familyoffices.com the link is the "we are online" graphic at the bottom right
im using
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#desginstudio-button-image-desktop').click();
}, 300);
});
</script>
unfortunately this isn't firing off....anyone know how i can achieve this?
Try using
<head>
<script>
function haveclicked(){
document.getElementById('myLink').click();
}
</head>
<body onload="setTimeout('haveclicked();',3000);">
<a id="myLink" href="http://www.google.com" target="_blank">GOOGLE</a>
</body>
Consider this from the MDN.. You need to create an event to do this correctly.
function simulateClick() {
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
var cb = document.getElementById("checkbox"); //element to click on
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>
Instead of
$('#desginstudio-button-image-desktop').click();
Try using
$('#desginstudio-button-image-desktop').trigger('click');
You can try to first locate the iframe and the element in it --
var frame = document.getElementById(/* your frame id*/),
button = frame.contentDocument.getElementById(/* your button id*/);
Then dispatch a synthetic event --
button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
Some browsers/versions don't support using click() to trigger a click event. Try using .trigger('click') instead
I've looked through stackoverflow for days, and none of the stuff I worked. Anyways, after an explosion and appending a submit button to my document the button doesn't alert when clicked.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("#submit").click(function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
Any suggestions?
You are binding click to submit before submit is even added to htmlDOM. To do it that way you have to first add submit to htmlDOM and then bind the event handler.
But, for such dynamic elements you can use jQuery on function and delegate from any parent element. It is not recommended to delegate from body, you can delegate from nearest parent that is present during document.ready event.
$(document).ready(function() {
alert('hi');
$("#a").click(function() {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='picture.png'> <form > <input type='text'></form><button id='submit'>submit</button>");
});
$("body").on('click','#submit',function() {
alert('hi');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>
I'm not 100% if I understood what you're trying to do there but check if this works:
<script>
$(document).ready(function () {
alert('hi')
$("#a").click(function () {
$(".main, .topbar, button").toggle("explode");
$('body').delay(8100).append("<img src='img.png'> <form > <input type='text'><button id='submit'>submit</button></form>");
});
$("#submit").click(function () {
alert('hi');
});
});
</script>
I assume you are inserting the button after page load, but calling the click handler before the element is on the page. Therefore jQuery can't find your element.
If you want to assign your click handler on page load, that's fine. Just assign your click handler to any parent element that is on the page when the page loads, like <body> and then using the jQuery .on() method to specify a descendant selector like so :
$('body').on('click', '#submit', function(){ alert('hi'); });
I have a blur event in a textarea:
$("#question-id-5-answer").blur(function (event) {}
And a click event in the Submit button:
$("#" + _sendBtnId).on("click", function () {}
It happens that the Click event does not fire because the Blur event cancel the click event.
I can't use the Mousedown event because it's a touch device that does not detect it.
I tried saving the following on my mobile device as a htm file and accessed using Forefox application. Appears to be working as expected. Please have a look if it helps you.
<form id="myForm">
<textarea id="myTxt"></textarea>
<input type="button" id="butSubmit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#myTxt").blur(function() {
if($(this).val() != "") {
alert("retunging false");
return false;
}
alert("rextarea is empty");
});
$("#butSubmit").click(function() {
alert("submitted");
});
});
</script>
What I am trying to do is following:
I have an input type button and I want to replace it's function on first click.
<input type="submit" class="submit-button" value="Submit" name="boom" />
So a [button] that serves for submit, I wanna show alert with some jquery plugins but lets do it here with normal javascript alert (default window).
So on first click it will be
alert('Something');
And on second click it will be default function (submit).
How can I achieve something like this?
Of course if button is clicked once, and then page reloaded, it will show same alert again on first button click.
Use one().
Attach a handler to an event for the elements. The handler is executed at most once per element.
Example:
$(".submit-button").one("click", function(e) {
// will only run on first click of element
e.preventDefault();
alert("Something");
});
Try this:
<script type="text/javascript">
var clicked = false;
function btnClick(e) {
if(clicked === false) {
alert('Something');
clicked = true;
e.preventDefault();
return true;
} else {
return false;
}
}
</script>
<input type="submit" onclick="btnClick(event)" class="submit-button" value="Submit" name="boom" />
In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?
You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>
visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")
Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery
document.getElementById('btnID').style.visibility='hidden';
//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery
If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>
when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help
function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>
If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);
<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough
You can use this code:
btnID.hidden = true;
var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay