Javascript submit form and show message in another page.

StackOverflow https://stackoverflow.com/questions/23249028

Question

I have a login page to a site that I am making that when you put a name in and click submit it goes to the next page and says Welcome (name entered) But I can't seem to put any other text on the page, any help?

index.html

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">

        // Called on form's `onsubmit`
        function tosubmit() {
            // Getting the value of your text input
            var mytext = document.getElementById("mytext").value;

            // Storing the value above into localStorage
            localStorage.setItem("mytext", mytext);

            return true;
        }

    </script> 
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
    <center>   
        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 
        <form name="myform" onSubmit="tosubmit();" action="home.html">

            <input  id="mytext" type="text" name="data">
            <input type="submit" value="Submit">

        </form>
</body>
</html>

home.html

<html>
<head>
<script>

    // Called on body's `onload` event
    function init() {
        // Retrieving the text input's value which was stored into localStorage
        var mytext = localStorage.getItem("mytext");

        // Writing the value in the document
        document.write("Welcome "+mytext+"!");
    }

</script>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>    

<body onLoad="init();">
<div id="container">

<div id="header">

</div>
<div id="navigation">
</div>
<div id="body">
</div>
<div id="rightcolumn">
</div>
<div id="footer">
Department of Computing
</div>
</div>

</body>

</html>

See for instance in the footer the 'Department of Computing' doesn't show up

Était-ce utile?

La solution

You can't use document.write() once the document has completed loading. If you do, the browser will open a new document that replaces the current and this is the reason why your footer text isn't showing in output (home.html).

Use the innerHTML property to put HTML code inside an element

So, in your home.html change document.write() to 

   document.getElementById("body").innerHTML="Welcome "+mytext+"!";  // here body name is the ID of element where you want to display your message.

Here is updated home.html

    <html>
    <head>
    <script>

        // Called on body's `onload` event
        function init() {
            // Retrieving the text input's value which was stored into localStorage
            var mytext = localStorage.getItem("mytext");

            // Writing the value in the document
            document.getElementById("body").innerHTML="Welcome "+mytext+"!"; // <-- this will display message in a element with id "body" 
        }

    </script>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    </head>    

    <body onLoad="init();">
    <div id="container">

    <div id="header">

    </div>
    <div id="navigation">
    </div>
    <div id="body"> <!-- message will be shown here -->
    </div>
    <div id="rightcolumn">
    </div>
    <div id="footer">
    Department of Computing
    </div>
    </div>

    </body>

    </html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top