Is there any way to save values from one HTML page and get the value in another

Question

I am a researcher trying to collect speech data on Language/Speaker change detection point. I tried to create a web app for that purpose. I have two HTML pages. The first one is user registration as shown in fig [image1][1] after clicking on that page it will jump to another HTML page [image2][2] where the user will listen to the audio and give his/her response [1]: https://i.stack.imgur.com/WAOcG.png [2]: https://i.stack.imgur.com/6T0IA.png

Questions:

How can i save the 'sentence number' value in HTML page 1 which is to be used in HTML page 2 (depending on the input value the recorded data will start playing)

I have been able to put something together with my little knowledge in JavaScript but it is not working properly

My code for HTML-1 - This is the input section where the user will give his/her name and the sentence no from where the user wants to listen to the audio. After searching a couple of forums i found out that this can be done via session storage which i tried to use but it is not working

<!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>Listening Test</title>
          <link type="text/css" href="materialize.min.css" rel="stylesheet" media="screen,projection"/>
          <link type="text/css" href="style.css" rel="stylesheet" media="screen,projection"/>
        </head>
        <body>
          <nav class="teal lighten-3" role="navigation">
            <div class="nav-wrapper container">
                <!-- logo -->
              <a href="index.html" id="logo-container" class="brand-logo">Speaker/Language change detection</a>
                <!-- sidenav menu button -->
             
            </div>
          </nav>
        
          <div class="section no-pad-bot" id="index-banner">
            <div class="container">
              <h2 class="header center teal-text">Listening Test</h2>
              <div class="row center">
                  <h5 class="header col s12 light brown-text">Step 1: Enter sentence you want to start from <br> Step 2: click start and listen to the fixed set of audio files <br> If you detect speaker change point, give your response in the form of 'YES/NO'</h5>
                  <p style="color:red">(Use earphones if available)</p>
              </div>
              <form id="form">
              <div class="col s3">
                <div class="col s6 input-field">
                  <input value="" id="student" type="text">
                  <label for="student">Your name</label>
              </div>
              <div class="col s6 input-field">
                  <input value="" id="number" min="1" max="150" step="1" type="number" class="validate">
                  <label for="number">Enter sentence no</label>
              </div>
            </form>
              <div class="row center">
                <a class="btn-large waves-effect waves-light teal pulse" href="recorder.html"><i class="material-icons right">keyboard_voice</i>Start session 1 (Language Change)</a>
              </div>
            </div>
          </div>
          </div>
          <script>
        
        
            var songIndex = parseInt(document.getElementById("number").value)
            var songIndex1=songIndex.toString()
            console.log(songIndex1)
            sessionStorage.setItem("songIndex1", songIndex1);
        
            // if (localStorage.getItem("uinput")) 
            // {
            //   localStorage.removeItem("uinput");
            // } else {
            //   localStorage.setItem("uinput", userinput);
            // }
          </script>
          
        </body>
        </html>

My code for HTML page 2 - The sentence number given by the user in the previous page will be used to set the sentence ID and depending on that the audio will play

    <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
                <link rel="stylesheet" href="style.css" />
            </head>
            <body>
        
                <div class="music-container" id="music-container">
                    <div class="music-info" id="music-info">
                        <h4 id="title"></h4>
                        <span class="timestamp" id="timestamp">00:00 / 00:00</span>
                        <div class="progress-container" id="progress-container">
                            <div class="progress" id="progress"></div>
                        </div>
                    </div>
        
                    <audio src="music/001.wav" id="audio"></audio>
        
                    <div class="img-container">
                        <img src="images/001.png" alt="music-cover" id="cover" />
                    </div>
                    <div class="navigation">
                        <!-- <button id="random" class="action-btn">
                            <i class="fa fa-random"></i>
                        </button> -->
                        
                        <!-- <button id="prev" class="action-btn">
                            <i class="fa fa-backward"></i>
                        </button> -->
                        <button id="play" class="action-btn action-btn-big">
                            <i class="fa fa-play">Play</i>
                        </button>
                        <button id="next" class="action-btn">
                            <i class="fa fa-forward">Next audio</i>
                        </button>
                        <button id="repeat" class="action-btn">
                            <i class="fa fa-repeat">Repeat</i>
                        </button>
                        <br>
                        <button id="yes" class="action-btn">
                            <i class="fa fa-yes">Yes</i>
                        </button>
                    
                        <button id="no" class="action-btn">
                            <i class="fa fa-no">No</i>
                        </button>
                    </div>
                </div>
                <!-- <p hidden>
                <details class="order-container" id="order-container"></details>
                    </p> -->
                <script src="script.js"></script>
            </body>
        </html>

I am a complete novice in web development, so any kind of help would be greatly appreciated. I am also attaching the js code below

    const musicContainer = document.getElementById("music-container");
        const musicInfo = document.getElementById("music-info");
        const playBtn = document.getElementById("play");
        // const prevBtn = document.getElementById('prev');
        const nextBtn = document.getElementById("next");
        // const random = document.getElementById('random');
        const repeat = document.getElementById("repeat");
        const audio = document.getElementById("audio");
        const progress = document.getElementById("progress");
        const progressContainer = document.getElementById("progress-container");
        const title = document.getElementById("title");
        const cover = document.getElementById("cover");
        const timestamp = document.getElementById("timestamp");
        // const orderContainer = document.getElementById('order-container');
        const yes = document.getElementById("yes");
        const no = document.getElementById("no");
        // Song titles
        const initialSongs = [
          "001",
          "002",
          "003",
          "004",
          "005",
          "006",
          "007",
          "008",
          "009",
          "0010",
          "0011",
          "0012",
          "0013",
          "0014",
          "0015",
          "0016",
          "0017",
          "0018",
          "0019",
          "0020",
          "0021",
          "0022",
          "0023",
          "0024",
          "0025",
          "0026",
          "0027",
          "0028",
          "0029",
          "0030",
          "0031",
          "0032",
          "0033",
          "0034",
          "0035",
          "0036",
          "0037",
          "0038",
          "0039",
          "0040",
          "0041",
          "0042",
          "0043",
          "0044",
          "0045",
          "0046",
          "0047",
          "0048",
          "0049",
          "0050",
          "0051",
          "0052",
          "0053",
          "0054",
          "0055",
          "0056",
          "0057",
          "0058",
          "0059",
          "0060",
          "0061",
          "0062",
          "0063",
          "0064",
          "0065",
          "0066",
          "0067",
          "0068",
          "0069",
          "0070",
          "0071",
          "0072",
          "0073",
          "0074",
          "0075",
          "0076",
          "0077",
          "0078",
          "0079",
          "0080",
          "0081",
          "0082",
          "0083",
          "0084",
          "0085",
          "0086",
          "0087",
          "0088",
          "0089",
          "0090",
          "0091",
          "0092",
          "0093",
          "0094",
          "0095",
          "0096",
          "0097",
          "0098",
          "0099",
          "00100",
          "00101",
          "00102",
          "00103",
          "00104",
          "00105",
          "00106",
          "00107",
          "00108",
          "00109",
          "00110",
          "00111",
          "00112",
          "00113",
          "00114",
          "00115",
          "00116",
          "00117",
          "00118",
          "00119",
          "00120",
          "00121",
          "00122",
          "00123",
          "00124",
          "00125",
          "00126",
          "00127",
          "00128",
          "00129",
          "00130",
          "00131",
          "00132",
          "00133",
          "00134",
          "00135",
          "00136",
          "00137",
          "00138",
          "00139",
          "00140",
          "00141",
          "00142",
          "00143",
          "00144",
          "00145",
          "00146",
          "00147",
          "00148",
          "00149",
          "00150",
        ];
        let songs = [...initialSongs];
        
        // Keep track of song
        let songIndex = 0;
        
        // Initially load song details info DOM
        loadSong(songs[songIndex]);
        
        // Update song details
        function loadSong(song) {
          title.innerText = song;
          audio.src = `music/${song}.wav`;
          cover.src = `images/${song}.png`;
        }
        var startTime;
        // Play song
        function playSong() {
          updateTimestamp();
          musicContainer.classList.add("play");
          musicInfo.classList.add("show");
          playBtn.querySelector("i.fa").classList.remove("fa-play");
          playBtn.querySelector("i.fa").classList.add("fa-pause");
          audio.play();
          startTime = Date.now();
        }
        
        // Pause song
        function pauseSong() {
          musicContainer.classList.remove("play");
          playBtn.querySelector("i.fa").classList.add("fa-play");
          playBtn.querySelector("i.fa").classList.remove("fa-pause");
        
          audio.pause();
        }
        
        // Previous song
        function prevSong() {
          songIndex--;
        
          if (songIndex < 0) {
            songIndex = song.length - 1;
          }
        
          loadSong(songs[songIndex]);
        
          playSong();
        }
        // Calculate time
        function stopButton() {
          if (startTime) {
            var endTime = Date.now();
            var difference = endTime - startTime;
            alert("Reaction time: " + difference + " ms");
            startTime = null;
          }
        }
        // Next song
        function nextSong() {
          songIndex++;
        
          if (songIndex > songs.length - 1) {
            songIndex = 0;
          }
        
          loadSong(songs[songIndex]);
        
          playSong();
        }
        
        // Get song duration
        function getSongDuration() {
          let allMins = Math.floor(audio.duration / 60);
          if (allMins < 10) {
            allMins = "0" + String(allMins);
          }
        
          let allSecs = Math.floor(audio.duration % 60);
          if (allSecs < 10) {
            allSecs = "0" + String(allSecs);
          }
        
          if (allMins && allSecs) {
            return `${allMins}:${allSecs}`;
          } else {
            return "00:00";
          }
        }
        
        // Update timestamp
        function updateTimestamp() {
          // Get minutes
          let mins = Math.floor(audio.currentTime / 60);
          if (mins < 10) {
            mins = "0" + String(mins);
          }
        
          // Get seconds
          let secs = Math.floor(audio.currentTime % 60);
          if (secs < 10) {
            secs = "0" + String(secs);
          }
        
          if (mins && secs) {
            timestamp.innerHTML = `${mins}:${secs} / ${getSongDuration()}`;
          } else {
            timestamp.innerHTML = "00:00 / 00:00";
          }
        }
        
        // Update progress bar
        function updateProgress(e) {
          const { duration, currentTime } = e.srcElement;
          const progressPercent = (currentTime / duration) * 100;
          progress.style.width = `${progressPercent}%`;
        
          updateTimestamp();
        }
        
        // Set progress bar & timestamp
        function setProgress(e) {
          const width = this.clientWidth;
          const clickX = e.offsetX;
          const duration = audio.duration;
        
          audio.currentTime = (clickX / width) * duration;
          updateTimestamp();
        }
        
        // Set song on repeat
        function repeatSong() {
          const isPlaying = musicContainer.classList.contains("play");
        
          if (isPlaying) {
            pauseSong();
          } else {
            playSong();
          }
        }
        
        // Set song on repeat
        function setRandomOrder() {
          if (random.classList.contains("active")) {
            random.classList.remove("active");
            songs = [...initialSongs];
            songIndex = songs.indexOf(title.innerText);
          } else {
            random.classList.add("active");
            songs = shuffle(songs);
            songIndex = songs.indexOf(title.innerText);
          }
        }
        
        // Shuffle songs
        function shuffle(songs) {
          for (let i = songs.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [songs[i], songs[j]] = [songs[j], songs[i]];
          }
          return songs;
        }
        
        // Set song on click
        function setSong(i) {
          songIndex = i;
          console.log("setSong -> songIndex", songIndex);
        
          loadSong(songs[songIndex]);
        
          playSong();
        }
        
        // Event listeners
        playBtn.addEventListener("click", () => {
          const isPlaying = musicContainer.classList.contains("play");
        
          if (isPlaying) {
            pauseSong();
          } else {
            playSong();
          }
        });
        
        // Change song
        
        nextBtn.addEventListener("click", nextSong);
        
        // Time/song update
        audio.addEventListener("timeupdate", updateProgress);
        
        // Click on progress bar
        progressContainer.addEventListener("click", setProgress);
        
        // Song ends
        audio.addEventListener("ended", pauseSong);
        
        // Repeat song
        repeat.addEventListener("click", repeatSong);
        
        // Random songs order
        // random.addEventListener('click', setRandomOrder);
        
        yes.addEventListener("click", stopButton);
        no.addEventListener("click", stopButton);

I am not at a computer at the moment but you should look into localStorage. It could let you persist data from one page to the next — Djave, Sep 15 '22 at 19:58

score 0 · Accepted Answer · answered Sep 15 '22 at 20:00

0

STEP 1

Add query string when user clicks on a link (source).

element.addEventListener('click', function(event) {
    // Stop the link from redirecting
    event.preventDefault();

    // Redirect instead with JavaScript
    window.location.href = element.href + '?sentence-number=1';
}, false);

STEP 2

Check query string value on a page load (source).

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

// Get the value of "sentence-number" --> "https://example.com/?sentence-number=1"
let value = params.sentence-number; // "1"

STEP 3

If the value of "sentence-number" is "X" on a page load, then play "Y".

This is a better way than using localStorage/sessionStorage.

answered Sep 15 '22 at 20:00

Rok Benko

14,265
2
24
49

Hi, Thank you for the comment but it is a bit unclear to me what is 'element' where you are adding the addeventlistener function. My result.html is inside a tag not a button.
Start session 1 (Language Change)
. – Amartya Roy Choudhury Sep 17 '22 at 06:55
You need to have a reference to your `` tag. Add this: `var element = document.getElementsByClassName('btn-large waves-effect waves-light teal pulse')[0];`. This is your "element". The goal is to add query string like this: `https://example.com/recorder.html?sentence-number=1`. – Rok Benko Sep 18 '22 at 16:15
Hi thank you for the reply, It is working but it is not taking the input value by the user probably because of this line `?sentence-number=1` as sentence-number is always 1. I tried setting it to the value entered by the user but it is throwing me an error – Amartya Roy Choudhury Sep 19 '22 at 13:24
Yeah, you should set it to the value entered by the user. What error are you getting? Can you edit your question and add more information? – Rok Benko Sep 19 '22 at 13:44
I did that but it is not working as expected. I added this two lines `var number = document.getElementById('number')` where number is the id of the input text box then in the code i changed `?sentence-number=1` to `?sentence-number=number` – Amartya Roy Choudhury Sep 19 '22 at 14:39
This is wrong: `window.location.href = element.href + '?sentence-number=number';`. This is right: `window.location.href = element.href + '?sentence-number=' + number;`. Let me know if it works now. If yes, please accept my answer and/or upvote it so that other members on StackOverflow will know that the problem was solved (see [this](https://stackoverflow.com/help/someone-answers) link). – Rok Benko Sep 19 '22 at 14:45
Hi thank you for the reply it is not working. I am getting the URL as `recorder.html?sentence=[object%20HTMLInputElement]`. Also i am getting an error 'Uncaught (in promise) DOMException: The element has no supported sources.' – Amartya Roy Choudhury Sep 19 '22 at 14:58
You mentioned above that you added `var number = document.getElementById('number');`. Did you add **exactly** this? If yes, this is probably causing the problem. You want to get the number, not the element itself. Change it like that: `var number = document.getElementById('number').value;`. – Rok Benko Sep 19 '22 at 15:02

score 0 · Answer 2 · answered Sep 15 '22 at 20:01

If you strictly only want to use HTML, CSS, and JS (no backend languages like PHP) you could redirect a user to your second page and include all the form values as query parameters.

// User one page 1 hits submit -> redirects to page 2
index.html -> result.html?sentenceNumber=4

You could then read that query parameter in JS from result.html like this:

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

let value = params.sentenceNumber;
// value = 4

More information on how to read Query Parameters here.

Is there any way to save values from one HTML page and get the value in another

2 Answers2