首页利用html和js，用户单击“提交”按钮后，将用户输入的所有信息显示在弹窗里面

利用html和js，用户单击“提交”按钮后，将用户输入的所有信息显示在弹窗里面

时间: 2024-09-18 16:04:41 浏览: 58

在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`函数，该函数获取表单中的文本输入框的数据，创建一个新的弹窗窗口，并填充显示用户输入的信息。

阅读全文