We Keep Coding

Programmatically running action instead of using button

I want a box with a welcome message etc to appear after a user registrers on my website. But instead of making it appear from just clicking on a button, i want it to happend when the email,password,username etc gets sendt to the database. So, instead of doing this :
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
Is there any ways i can do this programmatically? I have also tried :
<script>
self = function(id01)
</script>
but it wont work. Any tips on what i should try/ do?
This is how i send the info to my database :
//if no errors have been created carry on
if(!isset($error)){
$hashedpassword = $user->password_hash($_POST['password'], PASSWORD_BCRYPT);
$activasion = md5(uniqid(rand(),true));
try {
$stmt = $db->prepare('INSERT INTO members (username,password,email,active) VALUES (:username, :password, :email, :active)');
$stmt->execute(array(
':username' => $_POST['username'],
':password' => $hashedpassword,
':email' => $_POST['email'],
':active' => $activasion
));
$id = $db->lastInsertId('memberID');
//send email
$to = $_POST['email'];
$subject = "Registration Confirmation";
$body = "<p>Thank you for registering at Game World.</p>
<p>To activate your account, please click on this link: <a href='".DIR."activate.php?x=$id&y=$activasion'>".DIR."activate.php?x=$id&y=$activasion</a></p>
<p>Regards Site Admin</p>";
$mail = new Mail();
$mail->setFrom(SITEEMAIL);
$mail->addAddress($to);
$mail->subject($subject);
$mail->body($body);
$mail->send();
//redirect to index page
header('Location: index.php?action=joined');
?>

well you can achieve what the results you want in many ways, js alerts, jquery pop up. bootstrap modals.
Option 1 :
using jquery and jquery ui
<!-- latest stable jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- latest stable jquery ui -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<?php
if(isset($_GET['action']) && !empty($_GET['action'])){
$action = $_GET['action'];
if($action == "joined"){?>
<div id="modal" style="display: none;">
This is pop up, add message.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#modal").dialog();
});
</script>
<?php
}else{
//action != joined do something
}
}else{
//$GET NOT set do something
}
Option 2 :
Using Bootstrap
<!-- latest stable jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap links -->
<?php
if(isset($_GET['action']) && !empty($_GET['action'])){
$action = $_GET['action'];
if($action == "joined"){?>
<div class="modal fade" id="success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-block alert-success">
<h4>Welcome</h4>
<p>Add Message</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('document').ready(function(){
$('#success').modal('toggle'); });
</script>
<?php
}else{
//action != joined do something
}
}else{
//$GET NOT set do something
}
Option 3
Js alert
<?php
if(isset($_GET['action']) && !empty($_GET['action'])){
$action = $_GET['action'];
if($action == "joined"){?>
<script type="text/javascript">
alert('welcome');
</script>
<?php
}else{
//action != joined do something
}
}else{
//$GET NOT set do something
}
The first option, you will need to style the pop/div according to your design needs.
as you can see u need to first check if the action in the url is joined, meaning they have successfully signed up, then show the popup

You can do this using server side language PHP using $_GET['action'] or $_REQUEST['action'] on a proper return of your header - index.php?action=joined
Create logic on your DB insert page that checks to see if your query was successful. On success, it routes you to the header redirect, else returns an error message and exits the script.
Something like this:
$query = 'INSERT INTO members (username,password,email,active) VALUES (:username, :password, :email, :active)';
$stmt = $db->prepare($query);
$stmt->execute(array(
':username' => $_POST['username'],
':password' => $hashedpassword,
':email' => $_POST['email'],
':active' => $activasion
));
//Check to see if your $stmt is set, will return true if successful else it will return false
if($stmt){
$id = $db->lastInsertId('memberID');
//send email
$to = $_POST['email'];
$subject = "Registration Confirmation";
$body = "<p>Thank you for registering at Game World.</p>
<p>To activate your account, please click on this link: <a href='".DIR."activate.php?x=$id&y=$activasion'>".DIR."activate.php?x=$id&y=$activasion</a></p>
<p>Regards Site Admin</p>";
$mail = new Mail();
$mail->setFrom(SITEEMAIL);
$mail->addAddress($to);
$mail->subject($subject);
$mail->body($body);
$mail->send();
//redirect to index page
header('Location: index.php?action=joined');
}else{
echo 'Sorry but there was an issue with the INSERT.';
exit();
}
On index.php use an if/else statement or switch to check if $_GET['action'] (isset) and see if it is == to your value 'joined'. Then create a variable to hold your welcome message and display it else declare the variable null or post an alternate message perhaps.
Top of your index.php page:
$message = "";
if(isset($GET['action']) && $GET['action']=="joined"){
//place your Welcome message here
$message .= "<h2>Welcome and thank you for signing up!</h2>";
}else{
$message .= "<h2>Some other message</h2>";
//Or you could go with empty quotes or declare $message NULL
}
Then in your HTML call on your variable $message with something like:
<?=$message?> or <?php echo $message; ?>
<body>
<div id='wrapper'>
<header>Some header</header>
<nav id='nav'>
<ul>
<li class="nav-item">
BUTTON 1
</li>
<li class="nav-item">
BUTTON 2
</li>
</ul>
</nav>
<div id="content">
<?=$message?>
<div id="heading">Some Page Heading</div>
<div id="">
<p>
Some page content.
</p>
</div>
</div>
</div>
</body>
I am not the most proficient in PHP but this is probably how I would handle a server side request like this.
*** Keep in mind that you are requesting an update to your page on the update of your server, not a client side action like pressing the button.
Hope this helps.

Adding and Removing class on clicks (in wordpress loop)

So I have a wordpress loop to show certain posts. Each posts has a modal that I'll show the in and each modal is triggered by the .modal-trigger class. However, because there are more than one posts I want to prevent the user from opening more than one modal at a time and this is why I want to remove the .modal-trigger class once it is clicked. I will then addClass the .modal-trigger once the .fa-close is clicked
my main objective is to remove the .modal-trigger class once it is clicked and add this class once the .fa-close class is clicked
<section class="meet-the-team">
<div class="inner">
<?php
$team = new wp_query (array(
'post_type' => 'team',
'orderby' => 'date',
'order' => 'ASC'
));
if($team->have_posts()):
while($team->have_posts()):
$team->the_post();
?>
<div class="team-section">
<p class="team-header"><?php the_title(); ?></p>
<p class="team-details"><?php the_field('person_job_title'); ?></p>
<button class="button modal-trigger ">Read More</button>
<!-- MODAL SECTION FOR READ MORE POSTS -->
<div class="my-Modal">
<i class="fa fa-close"></i>
<?php the_title(); ?>
<p><?php the_field('person_job_title'); ?></p>
<?php the_content(); ?>
</div>
<!-- ENDING OF MODAL SECTION -->
</div>
<?php
endwhile;
else: "no posts available" ;
endif;
wp_reset_postdata();
?>
my jquery
$(document).ready(function(){
$('.modal-trigger').click(function(){
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
$('.button .modal-trigger').removeClass('modal-trigger');
});
$('.fa-close').click(function(){
$('.my-Modal').fadeOut().css('transform' , 'translate(0px , 5%)');
$('.button .modal-trigger').addClass('modal-trigger');
});
});
thank you for any help!

This won't work because your opening click removes the class you use to 'close' as well. Essentially, the following element you try to select doesn't exist anymore:
$('.button .modal-trigger').addClass('modal-trigger');
I'd go with a global variable that blocks all clicks when active, something like this:
$(document).ready(function(){
var hasActiveModal = false;
$('.modal-trigger').click(function(){
if(!hasActiveModal) {
hasActiveModal = true;
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
return;
}
});
$('.fa-close').click(function(){
if(hasActiveModal) {
hasActiveModal = false;
$('.my-Modal').fadeOut().css('transform', 'translate(0px , 5%)');
return;
}
});
});
This way you keep track of an active modal, and only allow modals to be opened when there's no open modal, and close them when there's a modal open.

How to show div in if block in php

I have index.php, in index.php there is a login form with session. If username and password are correct, it would go to home.php. But if username or password is incorrect I want to show div above login form that contains an error message like this .
I want this warning div is hidden and it will be shown only if username or password is incorrect. I've tried some other solution but none of them work, first If I put div in else condition, it will appear above login form no matter what the condition are. Second, if I put javascript to change style display = block, it won't appear in index page. Please help me to solve this problem. Thanks.
Index.php
<?php
session_start();
if(isset($_POST['login']))
{
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "admin" && $pass == "admin")
{
$_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?
?>
<script language="javascript">document.getElementById("warning").style.display = "block" </script>
<?php
}
}
?>
<!-- Warning that I want to show if username or password is incorrect -->
<div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span>
<strong>Warning!</strong> Incorrect Username or Password!
</div>
<!-- Login form -->
<form class="w3-container" action="" method="post">
</form>
[EDIT]
I finally solved the problem by following Sharky's suggesstion to put php code below warning div. In else case I'm still using javascript that will change style display of warning div to block. Thanks for all your help :)

The best way should be what you already tried: use the #warning div in the else case. Maybe it didn't work because you chose the wrong else?
<?php
session_start();
if (isset($_POST['login'])) {
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "admin" && $pass == "admin") {
$_SESSION['user']=$user;
?>
<script type="text/javascript">window.location.href='home.php';</script>
<?php
} else {
?>
<div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span>
<strong>Warning!</strong> Incorrect Username or Password!
</div>
<?php
}
}
?>
//Login form
<form class="w3-container" action="" method="post">
</form>
Another tipp (which has nothing to do with your question, but may help anyway): instead of using a redirection with JavaScript, you could simply use php, so that the additional roundtrip to the browser is not needed any more:
header('Location: home.php');
This requires, that no 'normal' output is created before the header() call and would work in this example, but may fail if there is some html code before it.

The reason why your div is not showing, is because your javascript which sets the display:block; is being executed BEFORE that div is generated in your markup.
Simple scenario (which fails):
<html>
<head>
<script language="javascript">
document.getElementById("warning").style.display = "block";
</script>
</head>
<body>
<div id="warning" style="display:none;">hello</div>
</body>
</html>
this will result to
Uncaught TypeError: Cannot read property 'style' of null because the moment javascript tries to get the element with id warning there is only this markup "existing" in the browser:
<html>
<head>
<script language="javascript">
document.getElementById("warning").style.display = "block";
</script>
do you see any div with id warning on the above markup? no, there isn't any div at all. in fact there is no <body> yet!
So in order for this to work, your javascript must go after that div. put it at the bottom just before the </body>. See the following, which works:
<html>
<head>
</head>
<body>
<div id="warning" style="display:none;">hello</div>
<script language="javascript">
document.getElementById("warning").style.display = "block"
</script>
</body>
</html>
Now, about your code: if you do not want to move that big block of if you can just set a flag variable like
$need_to_show_warning = false;
if($user == "admin" && $pass == "admin")
{
$_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?
$need_to_show_warning = true;
}
then, AFTER your div:
<!-- Warning that I want to show if username or password is incorrect -->
<div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;display:none">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span>
<strong>Warning!</strong> Incorrect Username or Password!
</div>
<?php
if($need_to_show_warning)
{
?>
<script language="javascript">document.getElementById("warning").style.display = "block"; </script>
<?php
}

How about this.
<?php
session_start();
if(isset($_POST['login']))
{
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "admin" && $pass == "admin")
{
$_SESSION['user']=$user;
?>
<script language="javascript">window.location.href='home.php' </script>
<?php
} else {
//What should I do here?
?>
<!-- Warning that I want to show if username or password is incorrect -->
<div id="warning" class="w3-container w3-red w3-text-white w3-card-2 w3-animate-opacity" style="position: relative;margin-top: 20px;">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">×</span>
<strong>Warning!</strong> Incorrect Username or Password!
</div>
<!-- Login form -->
<form class="w3-container" action="" method="post">
</form>
<?php
}
}
?>
?>

How Can we change the Value of Menu with its selected submenu, for client site.?

I want to change the value of Menu item with its selected submenu. I've done this using JS first. But it is again set to Menu value on loading the page.
Is there any way to do change the value of Menu for the current Session.
I'll be very grateful if anyone can help me in this.

Thank You for your answers, now I have found the answer and this is something like this:
<div class="container">
Dropdowns
The .dropdown class is used to indicate a dropdown menu.
Use the .dropdown-menu class to actually build the dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><?php echo $page[basename($_SERVER['PHP_SELF'])] ?>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<?php
$page=array('index.php'=>'Home','html.php'=>'Html','css.php'=>'CSS','javascript.php'=>'Javascript');
unset($page[basename($_SERVER['PHP_SELF'])]);
foreach ($page as $key => $value) {
?>
<li><?php echo $value ?></li>
<?php
}
?>
</ul>

As you have no code pasted to adjust the code to your needs i can only show you how the sessionStorage of JavaScript works. W3schools has an example and explanation. If the page is not working you can check this jsfiddle.
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

Include PHP page and replace divs when link clicked

I am trying to replace a div's contents with another PHP page when clicking on a link.
Link
echo 'Control Panel';
If statement checking if link clicked
<?php
/** Control panel link. */
if(isset($_GET['control'])){
$link=$_GET['control'];
if ($link == '1'){
include('controlpanel.php');
}
}
Divs
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
I am looking for divContainer to hold the controlpanel.php contents when the control link is clicked and div1 div2 and div3 to be 'removed/hidden'.
I can get both functionalities to work individually but not simultaneously.
The code currently displays the content within the page but not within a div/hiding contents of said div.
Any ideas?

Continuing with your current style, you could simply amend your conditional to the following:
<?php
if ($link == '1') {
include('controlpanel.php');
} else { ?>
<div id="divContainer">...</div>
<?php } ?>
Alternatively, as suggested, you could use some JavaScript to hotload in the control panel, and in the same breath, hide the divs you need hidden. Something like this (jQuery):
function loadPanel() {
$.ajax({
url: 'controlpanel.php',
method: GET,
success: function(res) {
$('#divContainer').html(res);
}
});
}
And then bind this to your link.