javascript实现一个html提交的表单数据放到另一个html页面显示
时间: 2024-02-22 21:55:30 浏览: 22
可以使用以下步骤来实现:
1. 在提交表单的HTML页面中,使用form元素包裹表单内容,并设置action和method属性。如下所示:
```
<form action="display.html" method="post">
<!-- 表单内容 -->
</form>
```
其中,action属性指定了表单提交后的目标页面,这里设置为display.html;method属性指定了表单提交的方式,这里设置为post。
2. 在表单中添加需要提交的表单元素,如input、select等等。例如:
```
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
```
其中,name属性是必须的,它指定了表单元素的名称。在提交表单时,后台可以通过表单元素的名称获取到对应的值。
3. 在目标页面display.html中,使用JavaScript获取提交的表单数据,并将其显示出来。例如:
```
<body>
<h1>提交表单数据:</h1>
<ul>
<li>姓名: <span id="name"></span></li>
<!-- 其他表单元素 -->
</ul>
<script>
// 获取表单数据
const params = new URLSearchParams(window.location.search);
const name = params.get('name');
// 将表单数据显示出来
document.getElementById('name').innerText = name;
// 其他表单元素的显示方式类似
</script>
</body>
```
其中,使用URLSearchParams获取了页面URL中的查询参数,即提交的表单数据。然后,使用JavaScript将表单数据显示在页面上。
以上就是实现将HTML表单数据提交到另一个页面并显示的基本步骤。