JavaScript/jQuery add innerHtml in other html page

Question

I have two html pages, in the index.html file, I have an button and an input textbox. I want the value in the textbox to show on the next page. how should i go about doing this, should i have two javascript file? or what?

Javascript:

$('#searchBtn').click(function(){

    var search = document.getElementById('searchField');
    document.getElementById("demo").innerHTML = search.value;
  });

Index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css" type="text/css" />
        <title>The Lantzyfi Bay</title>
    </head>
    <body>
        <div class="head">
            <img class="logo" src="pics/logo.png">    
        </div>
        <div class="body">
            <form>
                <div class="searchField">
                    <input id="searchField" type="text" placeholder="Lantzify Search" name="search" size="32"/>
                    <a id="searchBtn" class="search" href="results.html">Search</a>
                </div>
                <div class="checkboxes">
                    <input type="checkbox" name="music">Music</input>
                    <input type="checkbox" name="pics">Pics</input>
                    <input type="checkbox" name="videos">Videos</input>
                    <input type="checkbox" name="other">Other</input>
                </div>
            </form>
            <div class="links">
                <a href="#">Userpolicy</a>
                <a href="#">About</a>
                <a href="#">Lorem Ipsum</a>


            </div>


        </div>




        <script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="java/search.js"></script>
    </body>
</html>

results.html:

<!DOCHTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css" type="text/css" />
        <link rel="stylesheet" href="css/results.css" type="text/css" />
        <title>The Lantzyfi Bay</title>

    </head>
    <body>
        <div class="head">
            <form id="q">
                <a href="index.html"><img class="logo" src="pics/logo.png"></a>
                <input id="searchField" type="text" placeholder="User serch" name="search" size="30"/>
                <a id="searchBtn" class="search" href="results.html">Search</a>
            </form>

        </div>
        <div class="content">
            <h2>Serach: <!--Users Search word--></h2><h2 id="demo"></h2>
            <div class="mainContent">
                <table>
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Name</th>
                            <th>DB</th>
                            <th>RP</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                    </tr>
                    <tr>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                        <td>Test</td>
                    </tr>
                </table>
            </div>
        </div>


        <script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="java/search.js"></script>
    </body>
</html>

No - you can't do that, javascript runs within a page, you change the page, the javascript is gone — Jaromanda X, Nov 06 '15 at 09:13

score 2 · Accepted Answer · edited May 23 '17 at 12:15

You could add it to the URL and than read it on the other side.

Index.html would something like this:

$("#searchBtn").on('click', function () {
   var url = "results.html?q=" + $("#searchField").val();
   window.location = url
}

Result.html would have something like:

$(document).read(function () {
    $("...").html(getParameterName('q'));  
}

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
   return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Credit for getParameterName function

NOTE:

You do have to note that this is not the proper way of doing things as you will have a lot of problems like url encoding, strings that are too long. This is however a good way to start. All the best.

Also I was using some jquery in the code. If this is a problem let me know and I can change it to do without

score 0 · Answer 2 · answered Nov 06 '15 at 09:35

Only with a simple JS and HTML can not. By means of storing value and Timer (1) or SignalR (2) it could do this.

1, store value somewear ( database or cookies if just for actual user) and at some time refrest Result Page, by JS or outher, and read values.

2, SignalR Async refresh content of page, but you nead ASP.NET (MCV). http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr#next

score 0 · Answer 3 · answered Nov 06 '15 at 09:51

It appears two pages are served from the same origin.

localStorage is an option: The Mozilla demo containing an example
If the first page has a reference to the window of the 2nd page, e.g. 2nd page is opened by calling window.open. window.postMessage is also an option, it also works for cross origin.
If the web server is also under your control, you can of course use the server as a transmitter by sending data back to server through ajax then let the server notify the 2nd page through Server Sent Event or Web Socket and etc.

JavaScript/jQuery add innerHtml in other html page

3 Answers3