Data processing in HTML without server code (using just Javascript)

Question

I was just wondering whether there is some way to do this:

I have a form in a web page, after the user submits the form, the page is redirected to another static HTML page.

Is there any way to manipulate the data in the second HTML page without the help of any server code?

I mean can I display the form data that the user submitted in the second page?

Of course there should be a navigation, not some Ajax code to load the second page (using which it would be easy to manipulate the data).

Answer 1

You can access the pages GET parameters from JavaScript (window.location.search, which you still need to parse), and use this to pass some veriables to the static page.

(I suppose there is no way to get to POST content.)

You can also read and set the values of cookies from JavaScript.

If you are within a frameset where a "parent" page always sticks around you could potentially also store information in there (also cross-frame-scripting is tricky and I would try to avoid that).

Answer 2

If you have the first page submit the form with a GET action you'll get a URL that looks like:

http://tempuri.org/Page2.html?param1=value1&param2=value2

You could then use JavaScript on Page2.html that reads the query string parameters and displays them on the page.

Answer 3

If you send the form that through GET, yes, you can grab that info from js.

There is a jQuery plugin that does that, but if you want, you can roll your own, its not so complicated.

Just get the location.href and splits it using "?"

then, split again using "&"

Now, for each value, split with "=". Then you'll have a array with the name of the query, and the value of it.

edit: google for javascript get querystring to find dozens of implementations.

Answer 4

You can use a <form> with GET method to go to another static HTML page with some query parameters and then grab those parameters with JavaScript:

First page:

<form method="GET" action="page2.html">
    <input type="text" name="value1"/>
    <input type="text" name="value2"/>
    <input type="submit"/>
</form>

Second page:

<script type="text/javascript">
function getParams() {
    function decode(s) {
        return decodeURIComponent(s).split(/\+/).join(" ");
    }

    var params = {};

    document.location.search.replace(
        /\??(?:([^=]+)=([^&]*)&?)/g,
        function () {
            params[decode(arguments[1])] = decode(arguments[2]);
        });

    return params;
}

var params = getParams();

alert("value1=" + params.value1);
alert("value2=" + params.value2);
// or massage the DOM with these values
</script>