JavaScript / JSON: How to get input hidden data from a form to next page

Question

Based on my question, I have a table that displays all data from a JSON link. Each row will have a view button that will display the details of the data. The details will display at the next page. I use input hidden using form to send the row id to the next page. But, no id display at the next page after i click button "view". Below is the example of my code:

index.html

<div >
    <table id="mypanel">
        <tr>
            <th>Report ID</th>
            <th>Task Name</th>
            <th>Report</th>
            <th>Action</th>
        </tr>
    </table>
</div> 

<script>
    $.getJSON('https://testing.com/testing.asmx/ot_displayTask?badgeid=10010079&reportStatus=&status=yes', function(data) {
        
        $.each(data.otReportList, function(key, data){
            // console.log(key, data);

            let current_datetime = new Date(data["report_date"])
            let formatted_date = current_datetime.getDate() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getFullYear()

            var text = `<tr>
                            <td>${data["report_id"]}</td>
                            <td>${data["task_name"]}</td>
                            <td>${formatted_date}</td>
                            <td>
                                <form method="POST" action="read.html">
                                <input type="hidden" name="report_id" id="report_id" value="${data["report_id"]}">
                                <button type="submit">View</button>
                                </form>
                            </td>
                        </tr>`

                $("#mypanel").append(text);

        })

    });
</script>

read.html

<html>
    <head>
        
    </head>
    <body>
        <h2>Input 1: <span id='result1'></span></h2>

    </body>
</html>

<script>

    window.addEventListener('load',() =>{
        const params = (new URL(document.location)).searchParams;
        const report_id = params.get('report_id');
        document.getElementById('result1').innerHTML=report_id;
    })

</script>

Can anyone know how to solve it?

`method="POST"` -> `method="get"` (this will put the form data as query string at the end of the URL) — , Apr 09 '21 at 08:07
Yes you need to share the data through querystring no way you can store the data in js and then retrive it on next page. if and only you want to use `locastorage` or `cookies`. — Toxy, Apr 09 '21 at 08:09
@ChrisG Correct. but if i dont want to show the data at url, then how? — Majinbuu, Apr 09 '21 at 08:14
When you navigate to a new page, all data is lost. So if you plan to show details on the read.html page, maybe create a single page app instead? Otherwise this is simply a duplicate of https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads — , Apr 09 '21 at 08:20
Re: _"if i dont want to show the data at url, then how?"_ If you want to maintain `queryString`-less URLs, then [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) is almost certainly your best approach to storing data which you intend to be accessed by another page. See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API — Rounin, Apr 09 '21 at 10:43

score 0 · Answer 1 · answered Apr 09 '21 at 08:29

0

You need to change method to GET so that the report id data come as querystring.

<form method="GET" action="read.html">
     <input type="hidden" name="report_id" id="report_id" value="${data["report_id"]}">
     <button type="submit">View</button>
 </form>

Then in your read.html -> JS:-

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]});
console.log(queryDict.report_id);

Above location querystring is from How can I get query string values in JavaScript?

answered Apr 09 '21 at 08:29

Toxy

696
5
9

This is not what OP wants though: `but if i dont want to show the data at url, then how? ` – Apr 09 '21 at 08:33
Theirs no way expect if you use `cookies or localstorage` or any kind of framework @ChrisG – Toxy Apr 09 '21 at 08:39
I know, but this means that your answer isn't actually an answer – Apr 09 '21 at 08:40
@ChrisG yes but he asked me in comment to show it by code thats why i didi it i know its not an answer but a sidefix for him i guess. – Toxy Apr 09 '21 at 08:45
@ChrisG can you amend it that make the url is clean without showing the data? – Majinbuu Apr 09 '21 at 08:50
@Majinbuu You're looking for an SPA framework like React or the duplicate I linked in my comment above – Apr 09 '21 at 09:02

JavaScript / JSON: How to get input hidden data from a form to next page

1 Answers1