1
您好我目前有一個內部網站，我用它有一個表單，最終用戶填寫完畢，一旦他們點擊提交，就會打開一個使用javascript的新頁面輸出表單數據，然後用戶選擇預先格式化的文本以便複製並粘貼到另一個地方。該網站從用戶的計算機本地運行，因此不會在服務器上運行。在新窗口中將HTML表單數據輸出到DIV標籤
問題是，如果他們回到表單並輸入新數據並再次單擊提交，則帶有先前值的彈出窗口將保留在此處，並且表單將自行清除其數據，或者存在一堆彈出窗口，並且它們會弄糊塗哪一個是爲了什麼。
我試圖完成的是，當我點擊提交按鈕時，表單數據輸出到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>
在此先感謝。
好吧，因爲我的原始文章，我已經學會了一些引導，並重新我的網站這是更新的代碼，但我無法獲得表格字段的值輸出到模態請協助。
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());
});
});
請協助。
好奇，爲什麼你想有彈出窗口（這可以通過彈出窗口攔截器被禁用），而不是使用情態動詞？ –
不知道這是什麼 –
這實際上看起來非常適合我正在尋找的東西，我甚至不知道它。那麼我將如何輸出表單數據到模態？ –