How to detect if a URL was accessed from a button on another page, and if not, re-direct the user to the homepage?

Question

I have a booking form on my website that when clicked, opens a form in a new window for the user to fill out to book a table, when the form is complete, the window is closed.

The problem is, I want the form to ONLY be accessed from this button on the homepage (Or just any button from the homepage). What I want to stop though, is users being able to access /booking directly without interacting with the homepage at all.

The behaviour I would like is

If a user clicks a button on the homepage, it should open the form with a window.open command (already implemented) and the user can fill out the form no problem.

IF the user simply types into the url www.DOMAIN.com/booking, it should recognise they are haven't accessed this page from the main page and just re-direct them back to www.DOMAIN.com.

Here is my current attempt at this.

Booking.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking</title>
    
</head>
<body>

    <div id="booking-form">
    </div>
    <script>
    const myReferrer = document.referrer;
    const hasReferrer = document.referrer != "";
    const bookingFormArea = document.getElementById('booking-form')
    if(hasReferrer) {
        bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
} else {
bookingFormArea.innerHTML=`window.location.href = 'www.DOMAIN.com';` //Re-direct User to homepage
}
</script> 
</body>
</html>

UPDATE: Upon further testing, it seems that by using a button to link to "/booking" through a 'onClick' method and also using 'window.open' for it, document.referrer still comes up blank, is this correct behaviour?

Note that there is no standard that says that `document.referrer` must be populated. If you want to know if a user has hit your site, use a cookie or WebStorage or `window.name` or any of the other ways of tracking users. — Heretic Monkey, May 22 '21 at 01:50

iismaell · Answer 1 · 2021-05-22T01:47:22.163

0

Looks like you are appending the window.location.href as part of the booking form's innerHTML. You should automatically redirect the user to the home page when document.referrer is empty.

<script>
    const ref = document.referrer;
    const bookingFormArea = document.getElementById('booking-form')
    if (ref.match(/^https?:\/\/([^\/]+\.)?site\.com(\/|$)/i)) {
         // came from the home page
         // TODO: Replace domain URL site\.com
          bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
    } else {
          window.location.href = "https://stackoverflow.com/";
    }
</script>

Do not forget to change the domain name or URL with your own domain.

<button class="booking-button">Book Now</button>

Open booking page script.

<script>
document.querySelector(".booking-button").addEventListener("click", function(e) {
   e.preventDefault();
   window.location = "https://stackoverflow.com/booking";
}); 
</script>

edited May 22 '21 at 01:47

answered May 22 '21 at 01:29

iismaell

623
5
10

Upon further testing, it seems that by using a button to link to "/booking", document.referrer still comes up blank, is this correct behaviour? – Donnie Berry May 22 '21 at 01:37
Are you using an actual button element? Try to use a link. Example above. – iismaell May 22 '21 at 01:40
Well, the point is to open a new window with the exact dimensions of the form, I use window.open for that, can I do that with a tag? I want to open a new window and allow no scrolling, no url changes, no resizing and a fixed height/width on load. – Donnie Berry May 22 '21 at 01:41
Yes, that is possible. You can attach a click event listener to the link tag and open a window. But you should also use window.location. – iismaell May 22 '21 at 01:44
Oh, I've never actually used window.location for a re-direct.. so instead of window.open("DOMAIN.com"), how could I re-direct using window.location and have document.referrer pick it up? because the problem is, as part of window open, I have some attributes. My code is: window.open("URL", 'MyWindow1', "height=670,width=600,toolbar=no,menubar=no,scrollbars=no,location=no,status=no"); – Donnie Berry May 22 '21 at 01:46
You can find the example above. Make sure to add the class name booking-button to the link. And you can add the attributes as query variables or as part of the URL. – iismaell May 22 '21 at 01:48

How to detect if a URL was accessed from a button on another page, and if not, re-direct the user to the homepage?

1 Answers1