How to Go Back to an Article Tag With an ID From the Action Page
Suppose you are at a log-in form, and you put your information wrong; in this case, you would want to go back to the log-in page.
PHP has a built-in function header(), redirecting the page to a particular page.
But what if the log-in page is at the bottom of the page or somewhere in the middle.
In that case, we can target the tag’s id and put it into the URL. We can use the Html article tag for the independent item section of the log-in form.
Use PHP Header to Go Back to the Particular Article Tag With an ID
We use two different article tags with different ids, one with content and the log-in form. When we submit, we want to go back to the log-in part.
The index.php page:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 100px;
}
#email {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
input[type=email], input[type=password] {
width: 100%;
padding: 10px 18px;
box-sizing: border-box;
margin: 8px 0;
display: inline-block;
border: 3px solid #8fbc8f ;
}
button {
background-color: #8fbc8f;
color: white;
margin: 8px 0;
cursor: pointer;
padding: 10px 18px;
border: none;
width: 100%;
}
</style>
</head>
<body>
<div id="main">
<article id="paragraph1">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</P
</article>
<article id="email">
<form action="action.php" method="post">
Email: <input type="email" placeholder="example@example.com" >
<br>
Password: <input type="password" placeholder="********">
<br>
<button name="submit" type="submit" value="login" class="login">Login</button>
</form>
</article>
<article id="paragraph2">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</P
</article>
</div>
</body>
</html>
The form action page, action.php:
<script>
alert("This is form action page; please enter the information again, click ok to go back to the login form");
</script>
<?php
//header function is used to redirect the page to a perticular link. we can fetch the id of a tag and redirect the page
$url = 'Refresh:0; url=index.php#email';
header($url);
?>
After submitting the form at index.php, the code will go to the second page and redirect it back to the log-in part of index.php.
Output:
In this case, we can put anything to validate the email and password information from the database before the header at the action.php page to redirect on a conditional basis.
For dynamic redirect, we can use javascript or jquery on the index.php page to get the id of the current tag and send it to the action.php to redirect the page to that tag.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook