如何在不使用php的情况下提交html表单数据并将其传递到由表格组成的另一个html页面？

Question

我创建了简单的html页面"output.html“，它由表格和一个输入按钮”添加“组成。

<html>
<head>
<style>
table {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width:70%;
    }
    td,th{
        border:1px solid #dddddd;
        text-align:left;
        padding: 8px;
    }
</style>
</head>
<body>
    <center><h2>Employee Task Record</h2>
    <input type="button"  onclick="location.href='input.html';" value="Add" button class="button">
    <br><br>
        </body>
        <table>
        <tr>
    <th>Given Task</th>
    <th>Complete</th>
    <th>Task Type</th>
        </tr>
    </table>
</center> 
</body>
</html>

​

当我点击add按钮时，它会打开html表单"input.html“。

<html>
<body>
<div>
<center>
<form method="post" action="output.html">
Given Task : <input type="text" name="task"><br><br>
Complete: <input type="radio" name="taskDone" value="yes" checked> Yes 
<input type="radio" name="taskDone" value="no"> No<br> <br> 
Task Type: <select>
<option value="Meeting">Meeting</option>
<option value="coding">Coding</option>
<option value="documentation">Documentation</option>
</select> <br> <br>
<input type="submit">
</form>
</center></div></body>
</html>

​

​

现在，当我在input.html中提交表单时，我希望在output.html中显示输出，下面给出了我创建table.Sample输出的位置。我希望在表中以如下所示的格式输出。

​

Answer 1

如果没有像PHP这样的服务器端语言，你就无法做到这一点。您可以做的最近的事情是在相同的页面(输入和输出)中执行此操作，并使用js添加行(更改DOM)，但每次重新加载页面时，您将丢失所有更改。