DEV Community

CoderLegion for CoderLegion

Posted on β€’ Edited on β€’ Originally published at kodblems.com

3 1

How to redirect to another page in php on button click?

πŸŽ‰ Before you dive into this article...

πŸš€ Check out our vibrant new community at CoderLegion.com!

πŸ’‘ Share your knowledge, connect with like-minded developers, and grow together.

πŸ‘‰ Click here to join now!

Problem
I build some kind of interactive menu using PHP, HTML and JavaScript. I need redirect the page on click to some URL. Itried the following code, but it does not work:

" />
What is wrong with my code?

Solution
The root cause of the issue is, that you are trying to call PHP (server-side) code from JavaScript (the client-side). When JavaScript is acting – PHP (the server-side code) does not exist. It can be called during the server-side page rendering page only. Getting back to the original problem code sample, the statement:

<?php header("Location: /start.php");
will cause a JavaScript error, since it is not a valid JavaScript. What you can do? In case the β€œStart” button should always redirect to start.php you can redirect the browser to the static URL, like that:

Markup

Start
JavaScript

var btn = document.getElementById('btnStart');
btn.addEventListener('click', function() {
document.location.href = 'start.php';
});
Another approach will be to use inline JavaScript

Start
Incase the URL is dynamic – it is up to server to decide what should be the redirect URL, the inline approach will be easier to implement:

’”>Start
This technique called inline PHP, the server will generate the output, the browser will receive the following line:

Start
You can use the inline PHP in the JavaScript section (the first example) as well:

Markup

Start
JavaScript

var btn = document.getElementById('btnStart');
btn.addEventListener('click', function() {
document.location.href = '<?php echo "Stasrt.php"?>';
});
Tip:
There is a short cut for <?php echo … , you can use <?=’text’?> instead. For example:

'">Start
So, there are several ways to redirect pages from the client-side, choose the one you like more.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay