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

user_15589678 0
Viewed 94

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?

html json javascript
1 Answers

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?

user_114923780
Related