CODEWITHSUNDEEP
javascripthtml
Mahmud Adam
Mahmud Adam

Reputation: 3579

Displaying results on separate page

I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.

Upvotes: 1

Views: 2494

Answers (3)

fabriciorissetto
fabriciorissetto

Reputation: 10063

You can use just HTML + Javascript to achieve this.

Just create a form with method="get". So the values will be passed by querystring to the another page.

Example:

index.html

<html>
    <form method="get" action="results.html">
        <input type="text" name="age" />
        <input type="submit" value="Send" />
    </form>
</html>

results.html

<html>  
    <h1></h1>

    <script>
        document.querySelector("h1").innerHTML = window.location.search.substring(1);
    </script>
</html>

Upvotes: 2

Carsten Massmann
Carsten Massmann

Reputation: 28206

Here is an example. Write your html page (e.g. "index.html") like

<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>

and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this

<?php
echo json_encode($_REQUEST);
?>

(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.

Upvotes: 0

DJC
DJC

Reputation: 1173

Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual

Hope this helps

Upvotes: 1

Related Questions