Develop Reference

How to trigger javascript pop-up box by if-condition within the HTML code?

I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!

I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)

How do I switch between HTML pages in JavaScript

I've made a search bar in my web page and I'm trying to get the user input and compare it to a keyword. If it matches, show the user what he is searching for in another page.
The problem is that I don't know how to switch between pages of the HTML using JavaScript (being in page1.html and then take the user to page2.html if the keyword matches).
I've tried to implement href to a function and then running it when the search button is pressed but I haven't found a way to do it.
Here is the code:
<script>
let search = getElementById("Search").value;
if (search == "Keyword") {
//a href="page2.html" - (this is was my main idea, but i haven't found a way to implement it correctly)
}
</script>

First, you have to get the value from the input that you create and then you have to compare between the value that you get it and the specific keyword that you want, and after that, you have to create a button to submit with it. Then you can try this line
window.location.href=“./Page2.htm”;
inside if condetion.

try with:
window.location.href=“./Page2.htm”;

You can use
window.open(stringURL);
to open the html in a new window.
To open a new tab:
window.open(stringURL, “_blank”);
For more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Modifying a page with Ids

I'm trying to build something similar to this signup form.
Basically when you go through the steps, the whole page changes (probably just a div that disapears and another one that appears instead).
The problem is I can't seem to figure out what they are using to be able to change the whole page AND the url. What I mean by that is I can easily hide an div and make another one appear with javascript but that won't give me the URL effect I am looking for as I want the user to be able to use the back/forward buttons to navigate back and forth through the steps.
Any idea what external technologies they might be using or if it is simply something totally custom as their script custom form attribute suggest it (data-step) :
First step :
<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">
Second step :
<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">

Take a look at the History API in JS:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
Quote:
"Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists."

Dynamic Confirmation Message on a confirm.html

I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.

Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}

post multiple forms on a single button press

My page conisits of x amount of forms. One for each database entry. The user can change the data and save the individual item back to the database.
But where I am stuck is with a SAVE ALL button. Can you post multiple forms?? I am pretty certain you cannot with php, so I'm looking at javascript to solve my problems. Specifically:
document.forms.submit();
All that is going on is happening on the same page (i.e. when a form is submitted it puts a value at the end of the URL (foo?delete=true), and there is php at the top of the page which does something like: if delete is true -> delete field... else carry on as normal
My brain is saying I should do something like: (where $size is a count of how many forms there are)
<p onclick="saveAll('.$size.')">saveall</p>
and the javascript function:
function saveAll(size) {
for(i=0;i<size;i++)
{
document.forms[i].submit();
alert(i); // for testing purposes
}
}
The result of this was that the page started to refresh, then a popup with "0" came up, then the page refeshed and nothing else happend.
Is what I need to do even possible? If so, hoooww?
Thanks

I see 2 ways to escape this situation:
Put all your fields to one form
Submit your forms using AJAX and after last form submition is complete go to next page if needed.

But are all forms in the same page???
If yes I think the only way out is the ways suggested by Konstantin Likhter.
Otherwsie place each form in an IFRAME, then place all these IFRAMEs in the same main page, then using your code from the main page you can submit all the forms at once.