How can I update a page from a click handler on another page?

All we need is an easy explanation of the problem, so here it is.

I have got a "Flight Booking System" in HTML and CSS & JS. But the problem is when the person books a flight it is supposed to update the text in their dashboard, but it just won’t work. The "onclick function" of my button does just not connect to the JS function. Please help?

HTML For The Page:
<!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>S.B.S Booking System</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js"></script>
</head>
<body>
    <div class="sidenav">
        <a href="./index.html">Home</a>
        <a href="./book.html">Booking</a>
        <a href="./dashboard.html">Dashboard</a>
        <a href="./contact.html">Contact</a>
      </div>

    <h1 id="booktitle">Book A New Flight</h1>
    <h2 id="booktitle2">To Book A New Flight, Please Fill In The Form Below</h3>

    <form id="bookform" action="./contact.html">
        <label style="font-weight: 700;" for="ftakeoff">Where Will You Be Taking Off From?</label> <br>
        <input type="text" id="ftakeoff"><br>
        <label style="font-weight: 700;" for="fland">Where Will You Be Landing?</label> <br>
        <input type="text" id="fland"><br>
        <label style="font-weight: 700;" for="fname">What Is Your First - And Last - Name(s)?</label> <br>
        <input type="text" id="fname"><br>
        <label style="font-weight: 700;" for="fphone">What Is Your Phone Number?</label> <br>
        <input type="text" id="fphone"><br>
        <label style="font-weight: 700;" for="fextra">Any Extra Info (E.G: Time Of Flight, Accocomadtion, etc)</label> <br>
        <input type="text" id="fextra"><br>
        <button id="fsubmit" type="submit" onclick="cbookings()">Submit Flight Booking</button>
    </form>
        <button onclick="cbookings()">Submit</button>
</body>
</html>

HTML For The Dashboard Page:
<!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>S.B.S Booking Dashboard</title>
    <link rel="stylesheet" href="style.css">  
    <script src="./script.js"></script>
</head>
<body>
    <div class="sidenav">
        <a href="./index.html">Home</a>
        <a href="./book.html">Booking</a>
        <a href="./dashboard.html">Dashboard</a>
        <a href="./contact.html">Contact</a>
      </div>

    <h1 id="title1">Your Booking Dashboard</h1>
    <h2 id="title2">Check Up On Your Flights</h2> <br> <br>

    <h2 id="bstatus">No Bookings...</h2>
</body>
</html>

JS:

    var statustext = document.getElementById("bstatus")
     
    function cbookings() {
        statustext.innerHTML = "1 Booking"
        alert("Worked")
    }

When I click "fsumbit" it should change "bstatus" to "1 Booking". It just doesnt work. My JS is connected to my pages because when I do a JS command outside of the function it works probably. I’m using basic JS and code.

Heres my github rep:
https://github.com/samykcodes/sbsystem

Any my website:
samsbookingsystem.netlify.app

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You’re trying to use JS code to modify other pages of the website, which is not possible. When you click the button on the Booking page, document.getElementById("bstatus") is going to return a null value, since there is no element that has the ID ‘bstatus’ on the Booking page.

This is fundamentally not how JavaScript works — you cannot reference an element of a page that is not loaded. In order to click a button on one page, and have a value change on a different page, you would need to use far more complex methods than are relevant for your skill level.

In the short term, you can simply copy the button onto your dashboard page, and you will see that it works there.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply