您好我目前有一个我使用的内部网站，其中有一个表单，最终用户填写，一旦他们点击提交它打开一个新的页面使用JavaScript输出表单数据，然后用户选择预先格式化文本以便复制并粘贴到另一个地方。该网站是从用户的计算机本地运行的，因此它不在服务器上。
问题是，如果他们返回到表单并输入新数据并再次单击“提交”，则具有先前值的弹出窗口将保留在那里并且表单清除其数据或者有一堆弹出窗口他们将混淆哪一个是为了什么。
我想要完成的是当我点击提交按钮时，表格数据被输出到results.html页面中的div标签，我可以在其中包含一个关闭窗口的按钮。此外，还有多个页面有多个表单，因此.js文件不是一个选项。
以下是我的某个页面的编码示例，我使用了表单元素名称和标签的通用名称。
<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>
先谢谢。
好的，因为我的原帖我已经学习了一些bootstrap并重做了我的网站，这是更新后的代码，但我无法获取表单字段的值输出到模态请协助。
HTML：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid-content container-fluid">
<form>
<div class="form-group">
<label for='fieldname'>Name: </label>
<input type='text' name='name' class='form-control' id='fieldname'>
</div>
<div class="form-group">
<label for='fieldzip'>Zip Code:</label>
<input type='text' name='zip' class='form-control' id='fieldzip'>
</div>
<div class="form-group">
<label for='fieldopsys'>Favorite Color:</label>
<input type='text' name='favcolor' class='form-control' id='fieldfavcolor'>
</div>
<button type="button" class="btn btn-standard" data-toggle="modal" data-target="#myModal" id="submit">Submit</button>
<button type="reset" class="btn btn-standard" id="clear">Clear</button>
</form>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Results</h4>
</div>
<div class="modal-body">
<strong>Name: </strong> <span class='results' id='name'></span><br>
<strong>Zip Code: </strong> <span class='results' id='zip'></span><br>
<strong>Favorite Color: </strong> <span class='results' id='favcolor'></span><br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js文件
$('form').on('submit', function () {
event.preventDefault();
$(this).find('.form-control').each(function () {
var id = $(this).attr('id').replace('field', '');
$('.results' + id).text($(this).val());
});
});
请协助。
答案 0 :(得分：1)
好的，要实现模态，有几个选项：
我最喜欢的技术是为我的模态制作一个部分（如果你使用的是模板引擎），然后将它包含在将打开它的任何页面的底部。模态可能是这样的：
http://jsbin.com/cusicu/edit?html,css,js,output
我很快就使用jQuery编写了这个...随意调整它以满足您的需求（如果您更喜欢VanillaJS或其他什么，或者希望在提交时发生其他操作等）。应该注意的是，通常点击模态后面的叠加也将关闭模态（注意 - 你必须确保它只适用于叠加而不是模态本身），因此会击中逃脱，但为了及时性，我省略了那些。
希望这有帮助！
答案 1 :(得分：0)
您可以设置您希望它显示的内容：
let myContent = "data:text/html," + yourHTML
如果你想让一个事件用你的html触发一个新窗口，你可以像这样打开它：
element.addEventListener('click',function(){
let myContent = "data:text/html," + yourHTML
window.open(myContent);
});
另一种方法是设置像这样的链接
<a class="myLink" target="blank" href="">
然后在脚本中，您可以在UI中监听表单或事件的更改。
myLink = document.getElementsByClass('myLink')[0];
form.addEventListener('submit',function(){
// code for building your html from form values
// like yourHTML += document.getElementById('stateSelect').value;
let myContent = "data:text/html," + yourHTML
myLink.setAttribute('href', myContent);
return false;
});
来源：
答案 2 :(得分：0)
我为你创造了它，也许这就是你想要的。 我刚刚使用了jQuery插件。
到这里查看完整代码/预览：JSFiddle。
这是示例代码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>
这是示例代码JS：
$(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");
});
});