我想制作一个联系人列表类型的交易,你点击一个按钮,一个新的输入被附加到一个表单,然后用php打印在页面上。但是,每次重新提交表单时,回显的先前输入值都会消失。我如何制作它,以便每当我重新提交表单时,php通过将输入添加到页面上而不替换回显的旧输入来回显输入?
<html>
<head>
<title>Contacts</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet4.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<?php
if (isset($_POST['submit'])) {
$addresses = $_POST['apartments'];
$units = $_POST['num_units'];
for ($x = 0; $x < count($addresses); $x++) {
echo $addresses[$x] . " " . $units[$x] . "<br><br>";
}
}
?>
<body>
<h3> </h3>
<div id="button-container">
<div id="button-container-container">
<button id="add-button">
<i id="add-icon" class="fa fa-plus-square fa-2x"></i>
</button>
<p>Add an apartment</p>
</div>
<input name="Edit" type="button" value='Save' id="edit_save-button">
</div>
<form action="" method="post" id="someform">
<div id="labels">
<div style="margin-left:0; margin-top:20px; text-align:left;">
<p>Apartment Address</p>
</div>
<div style="margin-left:0; margin-top:-40px; text-indent:240px;">
<p># of Units</p>
</div>
</div>
<input type="submit" name="submit">
</form>
<script>
$(function () {
var template = "\
<input name='apartments[]' type='text' placeholder='Apartment Address' class='new-apartment-input1'/>\n\
<input name='num_units[]' type='text' placeholder='# of units' class='num_units'>\n\
<br><br><br><br>",
index = $('input').length,
compiled_template;
$('[name="Edit"]').on('click', function () {
var prev = $('input'),
ro = prev.prop('readonly');
prev.prop('readonly', !ro).focus();
$(this).val(ro ? 'Save' : 'Edit');
});
$('#add-button').click(function () {
compiled_textarea = $(template.replace("INDEX", index));
$('#someform').append(compiled_textarea);
index = index + 1;
});
});
</script>
</body>