Есть два способа сделать это, используя только PHP или какой-нибудь причудливый JavaScript. Я буду заниматься решением только для PHP. Решение JavaScript было бы гораздо более отзывчивым, поскольку не было бы повторных обращений к серверу, но оно также работало бы только для пользователей, у которых включен JavaScript, тогда как решение PHP работает для всех.
Общая схема решения такова:
- Изначально
$count
равно 1, и генерируется одна строка.
- Если пользователь нажимает кнопку Добавить, форма отправляется обратно в тот же PHP-файл со скрытой переменной
count
. Сценарий перезапускается с начала, увеличивается $count
и отображает на одну строку больше, чем в прошлый раз.
- Если пользователь нажимает кнопку Отправить, введенные имена обрабатываются.
Вот пример кода. Я извиняюсь, что у меня не установлен PHP на компьютере, на котором я пишу этот, так что это полностью не проверено. Надеюсь, что не так уж много ужасных синтаксических ошибок!
<?php
$count = isset($_POST['count']) ? $_POST['count'] : 1;
if (isset($_POST['add']))
++$count;
else if (isset($_POST['submit']))
{
header('Content-Type: text/plain');
print_r($_POST);
exit;
}
?>
<html>
<body>
<form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']) ?>" method="post">
<input type="hidden" name="count" value="<?php echo $count ?>" />
<?php for ($i = 1; $i <= $count; ++$i) { ?>
[<?php echo $i ?>]
First: <input type="text" name="firstName<?php echo $i ?>"
value="<?php echo htmlspecialchars($_POST["firstName$i"]) ?>" />
Last: <input type="text" name="lastName<?php echo $i ?>"
value="<?php echo htmlspecialchars($_POST["lastName$i"]) ?>" />
<br />
<?php } ?>
<input type="submit" name="add" value="Add" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
О, а вы хотите решение JavaScript, а? Ну, у вас уже есть действительно хороший ответ jQuery. Тогда как насчет нелепо длинного простого JavaScript-решения?
<html>
<head>
<script type="text/javascript">
// <![CDATA[
var count = 0;
function addRow() {
var table = document.getElementById("table");
var row = document.createElement("tr");
var countCell = document.createElement("td");
var countText = document.createTextNode(++count);
var firstCell = document.createElement("td");
var firstInput = document.createElement("input");
var lastCell = document.createElement("td");
var lastInput = document.createElement("input");
firstInput.type = "text";
firstInput.name = "firstName" + count;
lastInput.type = "text";
lastInput.name = "lastName" + count;
table .appendChild(row);
row .appendChild(countCell);
countCell.appendChild(countText);
row .appendChild(firstCell);
firstCell.appendChild(firstInput);
row .appendChild(lastCell);
lastCell .appendChild(lastInput);
}
// ]]>
</script>
</head>
<body>
<form action="somewhere.php" method="post">
<table id="table">
<tr>
<th>Row</th>
<th>First</th>
<th>Last</th>
</tr>
</table>
<script type="text/javascript">
addRow();
</script>
<input type="button" value="Add" onclick="addRow()" />
<input type="submit" value="Submit" />
</form>
</body>
</html>