We Keep Coding

Click JS button on page load

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();

How do I get click event of model form button?

On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?

Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})

It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}

Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.

Making a confirm box

I am trying to make my own dialog box. I want to use jquery for this. For some buttons on my site I need a confirmation dialog (like "Are you sure you want to delete" yes/no). When the dialog is active, the rest of the site should not be clickable.
So, I made this:
<div class="overlay" id="overlay" style="display:none;">
<div class="overlaycontent" id="overlaycontent">
<div id="overlaytext" class="overlaytext ">
<span id="overlaymessage" class="mediumtext bold">Deze klant verwijderen?</span>
<br><br>
<button id="nobutton" class="button1 highbutton hand" onclick="confirmno()">Nee</button>
<button id="yesbutton" class="button2 highbutton hand" onclick="confirmyes()">Ja</button>
</div>
</div>
</div>
ID overlay is over the whole page.
ID overlaycontent creates a white box on top of it.
ID overlaytext centers the message
ID overlaymessage contains the question/message.
ID nobutton is the button to say no :)
ID yesbutton is.. guess what :)
Now, the javascript to display a message:
function confirm(message,nobutton,yesbutton){
$('#overlaymessage').html(message);
$('#nobutton').html(nobutton);
$('#yesbutton').html(yesbutton);
$('#overlay').show();
}
function confirmno(){
$('#overlay').hide();
}
function confirmyes(){
????
}
So far, it works fine (except the yes button of course, please read further on), but for the next step I lack the knowledge. Say that I have a button somewhere to delete a user on my website.
<button class="redbutton" onclick="deleteuser(22)">
The button needs javascript like:
<script language="javascript">
function deleteuser(userid){
confirm('Delete user?','No','Yes');
??????
}
</script>
Now where the question marks are, I want the function to do something based on the fact the user clicked yes or no. How to catch this? I don't have any idea. Please help me out. I don't want to use Jquireui.dialog.

The trouble here is that you can't pause execution in javascript, so you'll need to adjust your confirm function (which you should probably rename, by the way, since JS has a native confirm function). Get rid of the onclick of your yes button, and adjust your confirm function like so:
function confirm(message,nobutton,yesbutton,yesfunction){
$('#overlaymessage').html(message);
$('#nobutton').html(nobutton);
$('#yesbutton').html(yesbutton);
$('#overlay').show();
$('#yesbutton').off("click").click(yesfunction);
}
Then, pass a function into your confirm call:
function deleteuser(userid){
function deleteConfirmed() {
// delete code here
}
confirm('Delete user?','No','Yes',deleteConfirmed);
}

You need to capture the result from your confirm dialogue box e.g.
var x = confirm("Are you sure you are ok?");
if (x) {
alert("Good!");
} else {
alert("Too bad");
}

You can simply do this.
<script language="javascript">
function deleteuser(userid){
if(confirm('Delete user?')) {
//'Ok' is clicked
}
else {
//'Cancel' is clicked
}
}
</script>

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.

I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html

The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();

Comment box appear on clicking link

I'm extremely new to front end web development, and I was wondering if there is anyway I can have a small text box appear on clicking a link, which disappears when I submit the form. (I want something like what Facebook has currently for the birthday wishes, where you click on the persons name, a small comment box opens up 'on top', and lets u post a wish on the persons wall from the main page itself).
Sorry if this is a stupid question.

The best will be to use a framework like jQuery Dialog UI. The documentation is big and there are a lot of samples available.
For instance, create a div element with your input text and bound his creation to the button you want:
HTML
<div id="dialog">
<input type="text" />
</div>
Open dialog
Javascript
$(function () {
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
$("#dialog").dialog('open');
});
});

The other answerer is assuming you're using jQuery. If that's true, I would look at jqModal. It's much slimmer and simpler than jQuery UI

basic example in plain javascript to get you started
<form id="mainForm">
<a id="clickme" href="javascript:;">click me</a>
<input id="submitme" type="submit" />
</form>
<script type="text/javascript">
var mainForm = document.getElementById("mainForm"),
textBox = document.createElement("input");
textBox.id="tmpTextBox";
textBox.type="text";
document.getElementById("clickme").onclick = function () {
mainForm.appendChild(textBox);
}
document.getElementById("submitme").onclick = function () {
mainForm.removeChild(textBox);
}
</script>