Javascript 将HTML表单数据输出到新窗口中的DIV标记中
嗨，我现在有一个我使用的内部网站，上面有一个最终用户填写的表单，一旦他们点击提交，它就会打开一个新页面，使用javascript输出表单数据，然后用户选择预格式化的文本，以便复制和粘贴到另一个地方。该网站是从用户的计算机本地运行的，因此它不会位于服务器上 问题是，如果他们返回表单并输入新数据，然后再次单击“提交”，则带有以前值的弹出窗口将保留在那里，表单将清除其自身的数据，或者有一堆弹出窗口，他们将弄不清楚哪一个窗口用于什么 我试图完成的是，当我单击submit按钮时，表单数据将输出到results.html页面中的div标记，在该页面中，我可以包含一个关闭窗口的按钮。此外，还有多个页面包含多个表单，因此.js文件不是一个选项 下面是我的一个页面的编码示例，我使用通用名称作为表单元素名称和标签Javascript 将HTML表单数据输出到新窗口中的DIV标记中,javascript,html,bootstrap-modal,Javascript,Html,Bootstrap Modal,嗨，我现在有一个我使用的内部网站，上面有一个最终用户填写的表单，一旦他们点击提交，它就会打开一个新页面，使用javascript输出表单数据，然后用户选择预格式化的文本，以便复制和粘贴到另一个地方。该网站是从用户的计算机本地运行的，因此它不会位于服务器上 问题是，如果他们返回表单并输入新数据，然后再次单击“提交”，则带有以前值的弹出窗口将保留在那里，表单将清除其自身的数据，或者有一堆弹出窗口，他们将弄不清楚哪一个窗口用于什么 我试图完成的是，当我单击submit按钮时，表单数据将输出到resul
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','_blank', 'toolbar=no,status=no,width=800,height=400')
message = "<b>Field 1: </b>" + document.form1.field1.value + "<br>";
message += "<b>Field 2: </b>" + document.form1.field2.value + "<br>";
message += "<b>Field 3: </b>" + document.form1.field3.value + "<br>";
message += "<b>Field 4: </b>" + document.form1.field4.value + "<br>";
DispWin.document.write(message);
}
</script>
<style>
label {font-weight: bold;}
</style>
</head>
<body>
<div>
<form name="form1" style="width: 60%">
<h3>Sample</h3>
<fieldset>
<label>Field 1: </label><br><input type="text" name="field1"><br>
<label>Field 2:</label><br><input type="text" name="field2"><br>
<label>Field 3:</label><br><input type="text" name="field3"><br>
<label>Field 4</label><br><textarea name="field4" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="Submit" onClick="display();">
<input type="reset" value="Clear">
</fieldset>
<br>
<a href="index.html"><img src="back.png"></a>
</form>
</div>
</body>
</html>
请协助。您可以设置希望它显示的内容，如下所示：
let myContent = "data:text/html," + yourHTML
element.addEventListener('click',function(){
let myContent = "data:text/html," + yourHTML
window.open(myContent);
});
let myContent = "data:text/html," + yourHTML
element.addEventListener('click',function(){
let myContent = "data:text/html," + yourHTML
window.open(myContent);
});
<a class="myLink" target="blank" href="">
好的，要实现模式，有几个选项：
- 可以使用诸如Bootstrap、Buffic等的UI框架来为您呈现模态。这可能是让它们运行的最简单方法
- jQuery和Javascript库都有实现它们的模式插件。（我一点也不知道）
- 您可以实现自己的
let myContent = "data:text/html," + yourHTML
element.addEventListener('click',function(){
let myContent = "data:text/html," + yourHTML
window.open(myContent);
});
希望这有帮助 我为你创造了它，也许这就是你想要的。 我刚刚使用了一个jQuery插件 转到此处获取完整代码/预览： 这是HTML的示例代码：
<div>
<form name="form1" style="width: 60%">
<h3>Sample</h3>
<fieldset>
<label>Field 1: </label>
<br>
<input type="text" id="f1" name="field1">
<br>
<label>Field 2:</label>
<br>
<input type="text" id="f2" name="field2">
<br>
<label>Field 3:</label>
<br>
<input type="text" id="f3" name="field3">
<br>
<label>Field 4</label>
<br>
<textarea id="f4" name="field4" rows="5" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" id="sendData">
<input type="reset" value="Clear">
</fieldset>
<br>
<a href="index.html"><img src="back.png"></a>
</form>
</div>
样品
字段1：
字段2：
字段3：
字段4
$(document).ready(function() {
$(document).on('click', '#sendData', function() {
event.preventDefault();
var f1 = $('#f1').val(),
f2 = $('#f2').val(),
f3 = $('#f3').val(),
f4 = $('#f4').val();
var getSendData = '<div>' +
'<p> Field 1 = ' + f1 + '</p>' +
'<p> Field 2 = ' + f2 + '</p>' +
'<p> Field 3 = ' + f3 + '</p>' +
'<p> Field 4 = ' + f4 + '</p>' + '</div>';
var contentData = "data:text/html," + getSendData;
window.open(contentData, "_blank", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,top=0,left=0,width=400,height=400");
});
});
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'发送数据'，函数（）上）{
event.preventDefault（）；
var f1=$（'#f1'）.val（），
f2=$（'#f2'）.val（），
f3=$（'#f3'）.val（），
f4=$（'#f4'）.val（）；
变量getSendData=“”+
“字段1=”+f1+”'+
“字段2=”+f2+”'+
“字段3=”+f3+”'+
“字段4=”+f4+”“+”；
var contentData=“data:text/html，”+getSendData；
打开（contentData，“_blank”，“位置=否，工具栏=否，菜单栏=否，滚动条=是，可调整大小=是，顶部=0，左侧=0，宽度=400，高度=400”）；
});
});