利用html和js,用户单击“提交”按钮后,将用户输入的所有信息显示在弹窗里面
时间: 2024-09-18 22:04:41 浏览: 54
在HTML和JavaScript中,当用户点击"提交"按钮后,通常的做法是通过事件监听实现这个功能。首先,你需要创建一个表单让用户输入信息,然后设置一个`onclick`事件处理函数来获取表单数据,并用一个新的弹窗窗口展示它。这是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Submit Form</title>
</head>
<body>
<form id="infoForm">
<input type="text" name="username" placeholder="用户名">
<input type="text" name="email" placeholder="邮箱">
<!-- 添加更多输入字段 -->
<button type="button" onclick="showInfo()">提交</button>
</form>
<script>
function showInfo() {
// 获取表单元素的值
var formData = document.getElementById('infoForm').elements;
var infoArray = [];
for (var i = 0; i < formData.length; i++) {
if (formData[i].type === 'text') {
infoArray.push({
name: formData[i].name,
value: formData[i].value
});
}
}
// 创建一个新的弹窗
var modal = window.open('', 'modal', 'width=400,height=300');
// 在弹窗中动态渲染表单数据
var content = '<h2>提交信息:</h2>';
for (var item of infoArray) {
content += `<p>${item.name}: ${item.value}</p>`;
}
modal.document.body.innerHTML = content;
}
</script>
</body>
</html>
```
在这个例子中,用户点击提交按钮后,会触发`showInfo`函数,该函数获取表单中的文本输入框的数据,创建一个新的弹窗窗口,并填充显示用户输入的信息。
阅读全文
相关推荐


















