How to get data from a form in another page (JavaScript)

Question

My English is not good enough so I hope you understand what's my problem...

I have a page 'A' with a form. When I click Submit, I want it to open/redirect to a page 'B', and I want to show on page 'B' the data of the form in page 'A'... I want to do this with JavaScript, not with jQuery or so. I've tried with window.opener or things like that... Next, the example code is shown.

Page 'A':

<html>
    <head>
    </head>
    <body>
        <form method="post" name="form1" id="form1">
            <input type="text" name="field1">
            <input type="submit" name="submit" onclick="window.open('show.html');">
        </form>
    </body>
</html>

Page 'B':

<html>
    <head>
    </head>
    <body>
        <script>
            var x = opener.document.forms["form1"]["field1"].value;
    document.write(x);
        </script>
    </body>
</html>

It's really important that page 'B' can show data from the form on page 'A'. I can't use PHP or another technology... :/

I hope you understand what I'm asking. Thanks!

**UPDATE

The solution (at least for me) is localStorage, as Sagar Hani indicated. Anyway, thanks to people who answered!

Possible duplicate of How to read the post request parameters using javascript — Monir Tarabishi
– Monir Tarabishi, Commented Aug 27, 2017 at 17:48
You can store the form data object in your local/session storage and access it in next page. — Sagar Hani
– Sagar Hani, Commented Aug 27, 2017 at 17:58

João Pedro Gomes · Accepted Answer · 2017-08-27 17:52:10Z

1

Can't be PHP? With PHP you can also send the info to page B and display to user all the info. In fact, is more user friendly because it's a server side process.

answered Aug 27, 2017 at 17:52

João Pedro Gomes

113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Edson Guízar Over a year ago

I know! PHP is super friendly with this stuff, but, I HAVE to use JavaScript, my engineering teacher wants it to be JS...

João Pedro Gomes Over a year ago

Okay, I'm not a javascript expert, but I think the best way is to store the form inputs as a cookie after a submit action in page A and get the cookie in page B. I don't think that javascript can do the stuff without store the info in user browser. But, like I said, I'm not a Javascript expert. How to set cookies? It's Easy: stackoverflow.com/questions/14573223/… Please thumbs up if I was helpful

thinuwan · Accepted Answer · 2017-08-27 18:27:19Z

1

Never you can get POST data from client side (using javascript or any other client side language)
You must use a server side language to get post data (like PHP, nodeJs).
But you can simply get GET data from client side (javascript).

Following is the exact solution that you want.

Page 'A' (a.html)

   <html>
        <head>
        </head>
        <body>
            <form action="b.html" method="get" name="form1" id="form1">
                <input type="text" name="field1">
                <input type="submit" name="submit">
            </form>
        </body>
    </html>

Page 'B' (b.html)

<script>

alert(findGetParameter("field1"))

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

</script>

edited Aug 27, 2017 at 18:27

answered Aug 27, 2017 at 18:21

thinuwan

6932 gold badges8 silver badges24 bronze badges

1 Comment

klvb Over a year ago

This not works, it return url adress instead input name

Collectives™ on Stack Overflow

How to get data from a form in another page (JavaScript)

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related