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)

Display hidden div after successful form upload

I'm using a shortcode as part of my membership setup which allows users to upload files directly to their contact record in my CRM. This displays a multi-upload form which I have then styled:
Once the files are uploaded the page refreshes and a success message appears. On refresh I also need to display a hidden div (#hiddendiv) underneath the success message.
From what I've read there is a JS/PHP combination that could potentially achieve this (such as this example - although this is quite vague and difficult to adapt).
Can anyone assist me/point me in the right direction to achieve this?

Since your form page is refreshing then you obviously not using AJAX, therefore instead of putting the div as html what you can do is echo a assign a variable initially it should be empty then, then echo that variable where you wanna show the div, this will echo empty message at the begging... then upon successfully validating your form and on success then assign the content of that div to the empty variable once the page loads its gonna show the div content u just assign
<?php
$hiddenDiv = "";
if(isset($_POST['submitButton'])){
//validate what you need to validate on
//On success assign value to hidden div
$hiddenDiv="<div class=\"whatever\">What ever dv content you need to display</div>";
}
?>
<!-- the place you wanna show the div -->
<?= $hiddenDiv?>

You could use the jquery switch class. This will allow you to do CSS transitions to make the appearance of the element smoother. This could be part of 'a' ajax response.
You could also just do something as simple as
$('#hiddendiv').css({"display":"inline"})
EDIT ** changed the to 'a' in reference to ajax.

Try like below:
<?php
if(isset($_POST['whatever'])
{
$display='';
}
else
{
$display='none';
}
?>
<div style='display:<?=$display?>'></div>

CSS Change Class Style Admin Panel

I have a status page, which bascially says if a service is online or offline. I am using a css class on the div tags to make them look different (one red one green). I was looking at making an admin page were I can log in and change the class on the div with javascript onclick. It is basic code but works fine
<script>
function toggleClass(el){
if(el.className == "class1"){
el.className = "class2";
} else {
el.className = "class1";
}
}
</script>
<div class="class1" onclick="toggleClass(this)"></div>
<div class="class1" onclick="toggleClass(this)"></div>
I want the changes I make on the admin.php page to effect the index.php, I cant have the index.php have the JS as people would just click and change the status. Is there an easy solution for this? I do have access to mysql and PHP if needed, any advice?

I would save the status into mysql and check with php. so you don't need js for that.
create a function in your adminPanel to set the status.
If you have access to websockets use them to update the status on the fly.
otherwise create an interval which will automatically update the status every ... 5 seconds or something. The users don't want to reload the page every few seconds to get update.
also show the time when the status was updated the last time.

Changing Data Output depending on pull down

I am new to coldfusion and Java Script and I can not figure the correct syntax needed to make this work. What I am trying to do is that there is a pull down menu that has three options; Active, Inactive, and All. The goal is that when the page originally loads that it defaults to active and shows all active shippers. However, if the user wants to see inactive user they would select it from the pull down and the data should change to only show those values. All would show both active and Inactive.
The way I thought to do this was to create a variable called Active_status and then use Onclick to change the value and refresh the page. I am using if statements to generate the data.
<cfparam name="active_status" default="ACTIVE">
This is at the beginning to show active first
<select name="active_status" id="active_status" class="tx" onchange="editTable(this.value)">
<option value="ACTIVE" selected="selected">ACTIVE</option>
<option value="INACTIVE">INACTIVE</option>
<option value="ALL">ALL</option>
</select>
This is the code to generate the options within the page
<script language="javascript">
function editTable( inVal )
{
if( inVal == 'ACTIVE' )
{
document.getElementById( "active_status" ).value = "ACTIVE";
window.location.reload();
}
else if ( inVal == 'INACTIVE' )
{
document.getElementById( "active_status" ).value = "INACTIVE";
window.location.reload();
}
else if ( inVal == 'ALL' )
{
document.getElementById( "active_status" ).value = "ALL";
window.location.reload();
}
}
</script>
Show the active works but after each selection only active shows. I am sure it is due to the default I have but I am not sure of the correct syntax I need to make this work.
If you can assist me on this that would be greatly appreciated. Any advice would be great or if you have a better way to do this I am always eager to learn new things.
I made the change but it still is not changing when Inactive is clicked?

The way I thought to do this was to create a variable called Active_status and then use Onclick to change the value and refresh the page.
By refreshing the page with Javascript without making any AJAX calls or submitting the form first, you are simply reloading the page and resetting the client-side form data. The data goes nowhere-- nothing is sent to the server.
If you want to dynamically change what is displayed using Coldfusion, then you must make an HTTP request to a Coldfusion page. You could do this various ways, but the simplest method is to use a form submission. In order to submit a form with HTML, your form needs three things:
A url to send the data to (your .cfm page), which goes in the form action attribute.
The HTTP method to use, which goes in the form method attribute. Typically, you'd use POST.
An input tag with type="submit". This is the submit button that the user can click to submit the form.
Example:
<form action="myPage.cfm" method="POST">
<!-- ...form fields go here... -->
<input type="submit">
</form>
When a form is submitted to a Coldfusion page using action="POST", the Coldfusion code within that page can then access the submitted form data by using the form scope. For instance, you would use form.active_status to get the data from the "active_status" drop-down in your example.
You can then use this information to dynamically determine what to display on the page. Example .cfm page:
<cfif form.active_status is 'ACTIVE'>
<div>Status is active</div>
<cfelse>
<div>Status is not active</div>
</cfif>
Side note: You cannot interact with Coldfusion directly using Javascript. They are executed in two different environments on two separate machines: JS is in the browser on the client, and CF is in the JVM on the server.

How to change HTML content with javascript after the POST method

I have troubles to change content in my HTML document with javascript after submitting a form with a POST method. I need to change the color of a div inside my HTML document to yellow, I have already done it, but the problem is that after it changes to yellow then the HTML website gets refreshed in the navigator and then it goes back to normal(white). It kind of flashes the yellow and then goes to white again.
Here is my HTML code:
<form action="" method="post" onSubmit="return changeColor()">
.
.
.
<div id="divColor">
.
.
And this is my javascript code to change the div color:
function changeColor()
{
var div = document.getElementById("courselist");
div.style.backgroundColor='yellow';
}
I need to do it this way because is part of the assignment, so I cannot change the color with CSS and so far we can only use HTML and javascript. This is not the whole assignment in case somebody thinks I want to cheat, this is the part that I am stucked with. I cannot make the div keep the yellow color after the navigator has refreshed the HTML website after the POST method.
Thank you!

When you submit a form, it goes to the next pages specified in action="". Therefore, when you click the submit button, it changes color, then the next page loads. Due to the lack of page specified in action="", it is reloading the same page so it turns yellow, then refreshes.
This is what you are probably looking for. You use AJAX to submit information to POST without actually loading a different page.

There are three ways to achieve your aim.
Using ajax to submit information, so that the page is not refreshed， and the status remain.Or you can do it like the following, it has the same effect as ajax:
< iframe name="myIfr" style="display:none">< /iframe>
< form method="post" target="myIfr">...< /form>
Changing "action" of "", record the status in the url, like this: "mypage.php?status=1", After the page is refreshed, you can get the status from the url.
Using Cookie. I think it's not a good idea.

You could separate it so that the form only prints out if other conditions are met. Use a variable called $output_form (or whatever you feel like naming it) and set it to false, then have the code print out one thing before the POST is sent, and something after the POST is sent. Here is a really stripped down version of some code I finished a little while ago, might help you see what you can do:
<?php
if(isset($_POST['Submit'])){
{SOME CODE HERE}
$output_form = true;
}
}
else{
$output_form = true;
}
if (!$output_form){
{SOME CODE HERE}
}
else{
{OTHER STUFF HERE}
$output_form = true;
mysqli_close($dbc);
}
}
if ($output_form){
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

Hi guys I finally solved my problem.
I had to return false in my changeColor() function and the website will change color, but not refresh itself. I like the approach with cookies.
Thank you for your help, I could not use either AJAX or PHP because they have not taught us that yet.