Привет, У меня есть внутренний веб-сайт, который я использую, на нем есть форма, которую конечный пользователь заполняет, и как только они нажимают кнопку «Отправить», открывается новая страница с использованием javascript для выводит данные формы, затем пользователь выбирает предварительно форматированный текст, чтобы скопировать и вставить в другое место. Веб-сайт запускается локально с компьютера пользователя, поэтому он не будет на сервере.Вывод данных HTML-формы в тег DIV в новом окне
Проблема заключается в том, что если они возвращаются к форме и вводят новые данные, а затем повторно представляют, то появляется всплывающее окно с предыдущими значениями, и форма очищается от его данных, или есть куча всплывающих окон, и они будет запутанным, какой из них для чего.
То, что я пытаюсь выполнить, - это когда я нажимаю кнопку отправки, данные формы выводятся в тег div на странице results.html, где я могу включить кнопку, чтобы закрыть окно. Также существует более одной страницы с более чем одной формой, поэтому файл .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>
Thanks in Advance.
Хорошо, так как мой исходный пост я узнал немного бутстрапа и переделал свой сайт, это обновленный код, но я не могу получить значения полей формы для вывода на модальный, пожалуйста, помогите.
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());
});
});
Пожалуйста помогите.
Любопытно, почему вы хотите, чтобы всплывающие окна (которые могут быть отключены путем блокировки всплывающих окон), вместо того, чтобы использовать модальности? –
Не уверен, что это такое –
Это действительно отлично подходит для того, что я ищу, и я даже не знал об этом. Итак, как бы я выводил данные формы в модальный? –