I want my webpage to auto click a button when the page is loaded. This is my button:
<button class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
I think this button calls a JS function of a wordpress plugin, so that you open the product configurator. If i copy this button html on another page tho it wont work. It will only work on the product page.
Im very new to developing, so i could really use some help. Does anyone have any ideas how to implement this?
window.onload = function() {
document.getElementById("my-button").click();
}
<button id="my-button" class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
this is how to do it in jQuery
$(document).ready(function(){ //on document loads (you could change to window also)
$('#click').click(); // click
})
$(document).ready(function(){
$('#click').click();
})
$('#click').click(()=>{
console.log('thanks!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click"> Click Meeh </button>
another shorter way to do it in vanilla js
document.onload = document.querySelector('#click').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click" onclick="console.log('hi')"> Click Meeh </button>
other ways to do it
https://stackoverflow.com/a/38517365/18001301
window.onload vs document.onload
document.getElementById("input").click();
Related
I use a Javascript code to open a link in new tab when a button is clicked. I use this button:
<button onclick="myFunction()">Link1</button>
<script>
function myFunction(){
window.open("Link1");
}
</script>
And in another post in the home page of my blog, I put another button:
<button onclick="myFunction()">Link2</button>
<script>
function myFunction(){
window.open("Link2");
}
</script>
The problem is, when I click the button to go to Link1, it opens Link2.
How can I put my buttons all in home page without having this bug?
Thank you,
Your functions have the same name, rename your second function to myFunction2():
<button onclick="myFunction2()">Link2</button>
<script>
function myFunction2(){
window.open("Link2");
}
</script>
Naming your functions differently will fix your problem. But if your buttons really do just open links in new tabs you are better off using an Anchor tag with target="_blank"
e.g.
link1
And if you need that to look like a button, you can just style it with CSS!
If I am having a button in user control and by default I want to disable it and enable it when the page loads completely how can I achieve it in ASP.Net?
Can any help me with this the type of the button is button and it is in user control.
<button type="button" id="demo">
Click me </button>
<script>
var demo = document.getElementById("demo");
demo.disabled=true;
window.onload = function(){
demo.disabled=false;
}
</script>
Using document.ready to know the page has loaded or not.
$( document ).ready(function() {
$("#demo").attr("disabled", false);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="demo" disable>
Click me
</button>
<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>
<embed src="MY WEBSITE LINK" style="width:500px; height: 300px;">
<input type="checkbox" id="btd" onmouseover="myFunction()" onclick="alert('clicked')">
<script>
jQuery(function(){
jQuery('#btd').click();
});
</script>
I have the code. But didn't Work.
http://www.imagebam.com/image/31ac1b820717083
How to Auto Click Button Continue, from Image?
We can't do auto click in HTML, but we can call any function that the button does with Jquery.
To work Jquery code, you want to add this to your code
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Actually when we click any button, it calls a function, that may be our own function or built in one.
Here Javascript can easily call any function without any button
Like this
//define the function
function alertsomething(){
alert("Hey, This is an alert inside that function");
}
//function works when button clicks
$("#btd").click(function(){
alertsomething();
})
//function automatically when page loads
$(document).ready(function(){
alertsomething();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btd" >Click me</button>
Here are the two ways to call a function. One is when you click the button and another one is when your page loads, that function will call automatically...
Thanks
<script> setInterval(function(){ document.getElementById('btn').click() }, 10000); </script>
Its working script for me
Send "data" from FORM 'POST' to refresh HTML page whith PHP code
I cant get this to work. I have been trying for ages. Please help me.
<script>
function goBack() {
window.history.back()
}
</script>
<button onclick="goBack()">Go Back</button>
Please have a look at this question: Inconsistency with window.history.back().
this
<button type="button" onclick="goBack()">Go Back</button>
could be what you're looking for
As Kevin B suggests
The browser could be interpreting the button as a submit button and
submitting the form, thus causing a page refresh. Adding type="button"
will prevent that.
First of all, you should make sure that your script tag have the proper type set:
<script type="text/javascript">
...
</script>
Also, I would suggest using the "go" function of the history object instead since the compatibility is higher. To simplify things you can simply do this:
<button onclick="javascript:history.go(-1)">Go Back</button>
Hope this helps.
This can stop it appearing to work
<a href="#" onclick=DoSomething()>Stop it working</a>
That's because the href will effectively add a new page in the history, the present page again
Incidently if you call
event.preventDefault()
in DoSomething then # will never get added to the history and it will appear to work again
This worked for me
<button type="reset" onclick="goBack()">Go Back</button>
The window.history.back() method does not work if it does not have any previous URL to go to. Your program needs to have a start URL and you will need to have your program moving forward to the next page to be able to go back and forward.
Try preventing the default action of the button. Note that nothing will happen if you have accessed no other pages in the current tab.
Javascript:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script>
document.getElementById("goBack").addEventListener("click", function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>
jQuery:
<button id="goBack">Go Back</button>
<span id="result"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#goBack').click(function(event){
event.preventDefault();
document.getElementById("result").innerHTML = "Going back";
window.history.back();
});
</script>
Go Back
The 'return false;' bit helped fix it for me
Actually for working of this you need to redirect to this website from any other website or if you are doing on local html file then you can just open any website and paste the link of your local file in search bar in that tab(don't open a new tab) and then it will work. Basically this fuction just press the back button of your browser so you need to have something so that it can go back.
I have a submit button in my login page. I want to disable the submit button after clicking once.I'ts working fine with this.disabled = true; query and after disable the button it's going to the next page. The problem is that when I press back button it's still is disable because the page is not reloaded from server,It's loading from the local cache. I want to enable the button every time when I come back to the login page. I can clear the cache but there is some problem like if it will load from the server and project will be slow. What will be the best way to do this?
<script>
$(document).ready(function(){
$(document).on('click','button',function(){
this.disabled = true
window.location="https://www.google.co.in/"
})
})
</script>
<body>
<button type="submit" id="button">Click Me!</button>
</body>
I set the buttons initial disabled attribute to disabled in the body html to prove that the code does enable it again (so you can remove that in the body)
I hope this helps:
<script>
$(document).ready(function () {
$("#button").removeAttr('disabled');
$("#button").click(function(){
$(this).attr('disabled','disabled');
window.location="https://www.google.co.in/"
});
});
</script>
<body>
<button type="submit" id="button" disabled="disabled">Click Me!</button>
</body>
You need another event that ensures the button is enabled on page load. Kind of like:
<script>
$(document).ready(function(){
$("#button").disabled = false;
$(document).on('click','button',function(){
this.disabled = true
window.location="https://www.google.co.in/"
})
})
</script>
<body>
<button type="submit" id="button">Click Me!</button>
</body>
I didn't try running this so I'm not sure if the syntax is 100% but it should give you the right idea.