Get input value and insert into table on different page

Question

How would I do the question asked above. I have tried .append() in javascript but can you get data from one html file and insert it into another?? Some please help.

`.append()` isn't even a method defined natively. To store data for usage in other pages you can use `localStorage` or `cookies`. — Derek 朕會功夫, Feb 26 '14 at 04:49
@anthonygore q mentions trying `.append()` - I've added the jquery tag ( 98% sure OP meant jquery's .append() method ) — Rob Sedgwick, Feb 26 '14 at 05:02
Just wanted to let you know that the accepted answer does not do what is asked in the question... — T J, Oct 07 '14 at 17:17

score 0 · Answer 1 · answered Feb 26 '14 at 04:57

If the page you are receiving the data was created by your js then do it like this.

var childPage = window.open("somepage.html");

The child page would need a global function to receive data, then just call it.

childPage.passData(dataToPass);

If the page to receive the data is the parent, and the input is on the child do like this.

window.parent.someFunction(dataToPass);

Your respective functions would then have to take said data and do the work fro there.

the functions do have to be on the global scope of each page.

score 0 · Answer 2 · edited May 23 '17 at 12:03

Your should wrap the inputs in a<form> whose action attribute is set to the url of the page in which you want to display the values, as shown below:

    <form action='url to second page' method='get'>
        <input name='name' value='something' />
        <button>Submit</button>
    </form>

In the second html page, You can retrieve the request parameters by calling the js function given in this answer when it is loaded:

For example,

<html>
  <head>
    <title>b.html</title>
    <script>
        function load() {
            var params = getRequests();
            console.log(params['name']);
        }
        function getRequests() {
            var s1 = location.search.substring(1, location.search.length).split('&'),
                r = {}, s2, i;
            for (i = 0; i < s1.length; i += 1) {
                s2 = s1[i].split('=');
                r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
            }
            return r;
        };
    </script>
    </head>
    <body onload='load();'></body>
</html>

The function getRequests() returns an object containing all request parameters with the name of input element as key value. So if your first html page contains an input with name='test', the following code :

var params= getRequests();
var value =params['name'];

will give you the value of test input in second html page. Then you can use DOM API methods such as document.getElementById() to target the table elements in which you want to display the value, and set it's innerText.

Rob Sedgwick · Accepted Answer · 2014-02-26T05:14:46.347

can you get data from one html file and insert it into another?

Try .load()

$("#mydivid").load("/myotherpage.html");

To get a specific part of that page

$("#mydivid").load("/myotherpage.html #dividonotherpage");

We can also do something after it has loaded

 $("#mydivid").load("/myotherpage.html", function() {
    $("#mydivid").show();
    /* like grab the values of attributes .. */
});

https://api.jquery.com/load/

edit: / reading @QBM5, I see you might be referring to 'data' as local client side user input from another window. Disregard this answer if so, as this will not pick up changes that are not set as part of the original delivered markup.

Get input value and insert into table on different page

3 Answers3