Question

96

JavaScript display new page when submit HTML form

rated 0 times [ 101] [ 5] / answers: 1 / hits: 26926 / 12 Years ago, sun, october 14, 2012, 12:00:00

Suppose I have 2 html files: form.html and confirm.html

form.html just have a text field and a submit button, when you hit submit it will display what you just typed in text field.

    <HTML>

      <HEAD>

        <TITLE>Test</TITLE>

        <script type=text/javascript> 



        function display(){ 

            document.write(You entered:  + document.myform.data.value);

        } 

        </script> 

      </HEAD>

      <BODY>

      <center>    

<form name=myform>



  <input  type=text name=data>

  <input type=submit value=Submit onClick=display()>



</form>

    </BODY>

    </HTML>

Now I want that when hit submit button it will display entered value in confirm.html. What should I do? I mean what should be in confirm.html and how data from form.html be used in other location, do I need create a separate JavaScript file to store JS function so I can use it in both 2 html files. I am kind of new to all kind of stuff.

Note: No PHP or server side language or anything super here, just 2 html files in my Desktop and I want to test using FireFox.

Thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramseydeshaunc

Add To Favorites

Follow

Total Points: 30

Total Questions: 91

Total Answers: 103

Location: Palau

Member since Tue, May 30, 2023

1 Year ago

ramseydeshaunc questions

1 Check if a string starts with any of the strings in an array

Mon, Jun 7, 21, 00:00, 3 Years ago

1 Tooltips and Popovers not working in Bootstrap 5

Wed, Apr 7, 21, 00:00, 3 Years ago

1 How to save card details in stripe (javascript)

Sun, Jul 12, 20, 00:00, 4 Years ago

1 Javascript Fetch is Slow (60ms vs 3ms)

Sun, Mar 29, 20, 00:00, 4 Years ago

1 Firebase: How to generate access token from username and password on the server?

Sun, Nov 10, 19, 00:00, 5 Years ago

View All

answered 12 Years ago kayap · Accepted Answer

You can try using localStorage or cookies. Check one of the 2 solutions found below...

1 - If you have HTML5, you can store the content of you input into the localStorage.

Try this example:

form.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> 

</head>

<body>

    <center>   

        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 

        <form name=myform onsubmit=tosubmit(); action=confirm.html>



            <input  id=mytext type=text name=data>

            <input type=submit value=Submit>



        </form>

</body>

</html>

confirm.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(passed value = +mytext);

    }



</script>

</head>    



<body onload=init();>



</body>



</html>

2 - Also, as @apprentice mentioned, you can also use cookies with HTML standards.

Try this example:

form.html:

<html>

<head>

    <title>Test</title>

    <script type=text/javascript>

        // Function for storing to cookie

        function setCookie(c_name,value,exdays)

        {

            var exdate=new Date();

            exdate.setDate(exdate.getDate() + exdays);

            var c_value=escape(value) + ((exdays==null) ?  : ; expires=+exdate.toUTCString());

            document.cookie=c_name + = + c_value;

        }



        // 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 a cookie

            setCookie(mytext, mytext, 300);



            return true;

        }



    </script> 

</head>

<body>

    <center>   

        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 

        <form name=myform onsubmit=tosubmit(); action=confirm.html>



            <input  id=mytext type=text name=data>

            <input type=submit value=Submit>



        </form>

</body>

</html>

confirm.html:

<html>

<head>

<script>



    // Function for retrieveing value from a cookie

    function getCookie(c_name)

    {

        var i,x,y,ARRcookies=document.cookie.split(;);

        for (i=0;i<ARRcookies.length;i++)

        {

            x=ARRcookies[i].substr(0,ARRcookies[i].indexOf(=));

            y=ARRcookies[i].substr(ARRcookies[i].indexOf(=)+1);

            x=x.replace(/^s+|s+$/g,);

            if (x==c_name)

            {

                return unescape(y);

            }

        }

    }



    // Called on body's `onload` event

    function init() {

        // Retrieving the text input's value which was stored into a cookie

        var mytext = getCookie(mytext);



        // Writing the value in the document

        document.write(passed value = +mytext);

    }



</script>

</head>    



<body onload=init();>



</body>



</html>