JavaScript display new page when submit HTML form

前端未结

关注

 4  1773

庸人自扰

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

相关标签:

4条回答

情深已故

2021-01-07 14:32

What you could do is submit the form using a get method (method="get"), and send it to your confirm.html page (action="./confirm.html").

Then, you could use jQuery to retrieve the values from the URL from your confirm.html page.

This website provides a method to do that: http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html .

Then, all you have to do is call your display() method.

0 讨论(0)
发布评论:

提交评论
- 加载中...

萌比男神i

2021-01-07 14:36

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>

0 讨论(0)

南方客

2021-01-07 14:42
Seams like a fit for persist.js, which will let you save and load data in the user's browser. After including its javascript file, you can save data like this:
```
var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');
```
And you can later retrieve the saved data in another html page like the following:
```
var store = new Persist.Store('My Application');
val = store.get('some_key');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2021-01-07 14:50

You could also, instead of changing the page, change the content of the page. Upon submission just change the page using the innerHtml variable.

0 讨论(0)
发布评论:

提交评论
- 加载中...