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

Question

我正在重新编写一个使用Perl Dancer和Template Toolkit编写的大型Web表单，以处理提交的表单数据并显示结果页面。 我想放弃Template Toolkit和Dancer，转而使用仅Javascript解决方案。 如何编写将所有数据传递到Javascript的表格，并使其在格式良好的结果页上显示数据？

Answer 1

我不确定可以在表单中输入什么样的数据，因此对于如何以一种格式良好的方式呈现这些数据，我没有任何具体帮助。

关于将数据从表单传递到javascript（或jquery，因为它在您的标签中）的主题，这是一个如何实现此目的的示例。

假设您有一个简单的HTML表单，布局如下。

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

您可以在javascript中捕获此表单的提交事件，阻止其正常运行，从其输入字段中获取数据并对它们进行特定处理。 这是一个例子。

// On DOM loaded
$(document).ready(function () {
  // Catch the submit event of the form
  $('#form').submit(function (e) {
    // Prevent default form submit event
    e.preventDefault();
    // Access some input field data
    var input = $('#input').val();
  });
});

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

Answer 2

我想到了！ 我将使用HTML5 sessionStorage。 这是代码：

表格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>

这是main.js：

function saveData() {
    var submit = document.getElementById('completed');
    submit.onclick = function() {
        sessionStorage.setItem('day', document.getElementById('day').value);
    };
}

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

这是结果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();
};

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

问题描述

2 个解决方案

解决方案1
0 2015-10-04 01:39:57

解决方案2
0 已采纳 2015-10-04 12:08:23

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

问题描述

2 个解决方案

解决方案1 0 2015-10-04 01:39:57

解决方案2 0 已采纳 2015-10-04 12:08:23

解决方案1
0 2015-10-04 01:39:57

解决方案2
0 已采纳 2015-10-04 12:08:23