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处理表单数据＆amp;显示单独的结果页？

2 个答案: