如何使用Javascript处理表单数据并显示单独的结果页面？_Javascript_Jquery_Html

如何使用Javascript处理表单数据并显示单独的结果页面？

javascript jquery html

如何使用Javascript处理表单数据并显示单独的结果页面？,javascript,jquery,html,Javascript,Jquery,Html,我正在重新编写一个大型web表单，它是使用Perl Dancer和Template Toolkit编写的，用于处理提交的表单数据并显示结果页面。我想放弃模板工具包和Dancer，转而使用纯Javascript的解决方案。如何编写表单将所有数据传递给Javascript，并让它在一个格式良好的结果页面上显示数据？我不确定您的表单中可以输入哪些类型的数据，因此我没有任何具体的帮助来说明如何以格式良好的方式显示这些数据关于将数据从表单传递到javascript或jquery的主题，因为这在您的标记中

我正在重新编写一个大型web表单，它是使用Perl Dancer和Template Toolkit编写的，用于处理提交的表单数据并显示结果页面。我想放弃模板工具包和Dancer，转而使用纯Javascript的解决方案。如何编写表单将所有数据传递给Javascript，并让它在一个格式良好的结果页面上显示数据？

我不确定您的表单中可以输入哪些类型的数据，因此我没有任何具体的帮助来说明如何以格式良好的方式显示这些数据

关于将数据从表单传递到javascript或jquery的主题，因为这在您的标记中，这里是一个如何实现这一点的示例

假设您有一个HTML格式的简单表单，如下所示

<form id="form">
  <input type="text" id="input">
</form>

如果您想提供更多关于您将从表单传递哪些数据的信息，我很乐意为您指出一个更具体的方向，说明如何以一种良好的格式格式化和呈现您的数据。

我知道了！我将使用HTML5会话存储。代码如下：

表格html：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Form test</title>
</head>
<body>
    <form id='form' action="result.html" rel="external">
        <input name='day' id='day' type='text'><input type='submit' id='completed' value='Completed!'>
    </form>

    <!-- SCRIPTS -->
    <script src="jquery.js"></script>
    <script src="main.js"></script>
</body>

以下是结果html：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Result</title>
    </head>
    <body>
        <div id="stuff"></div>

        <!-- SCRIPTS -->
        <script src="jquery.js"></script>
        <script src="result.js"></script>
    </body>
</html>

下面是result.js：

function displayData() {
    var div = document.getElementById('stuff');
    div.innerHTML = "<p>" + sessionStorage.getItem('day') + "</p>";
}

window.onload = function() {
    displayData();
};

我已经做到了这一点，这正是我正在使用的简单数据，但是我如何获取输入值并将其推送到一个新的、单独的结果页面呢？有了模板工具包，我的表单开始如下：在结果页面中，我的行如下：Name:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Result</title>
    </head>
    <body>
        <div id="stuff"></div>

        <!-- SCRIPTS -->
        <script src="jquery.js"></script>
        <script src="result.js"></script>
    </body>
</html>

function displayData() {
    var div = document.getElementById('stuff');
    div.innerHTML = "<p>" + sessionStorage.getItem('day') + "</p>";
}

window.onload = function() {
    displayData();
};