Одна вещь, которую вы могли бы сделать, это вместо того, чтобы установить тип элемента ввода «Добавить» на «отправить», установить его на «кнопку» и добавить атрибут id для регистрации обработчика щелчков:
<!-- ... -->
<div id="newperson">
<p>Add another person:</p>
<input id="extra_input" name="extra" /><input id="add_button" type="button" value="Add" />
</div>
<!-- ... -->
Причина типа ввода "кнопка" заключается в том, что получающаяся кнопка на странице выглядит точно так же, как кнопка отправки, но по умолчанию она ничего не делает при нажатии, что позволяет настраивать ее эффект. Кроме того, тип ввода «кнопка» поддерживается во всех браузерах, поддерживающих HTML 3.2 или более позднюю версию , включая HTML 5 .
.
Где-то в вашем Javascript у вас, вероятно, есть функция, которую вы хотите вызывать всякий раз, когда пользователь нажимает кнопку «Добавить». Предположим, что он называется addAnotherPerson, вы просто вызываете addAnotherPerson в обработчике кликов:
// This is jQuery code, but all JS frameworks that I have seen have a similar feature to register a click handler on a DOM element referenced by ID.
$("#add_button").click(function (event) {
addAnotherPerson();
$("#extra_input").val(""); // reset the value
});
Вам также необходимо добавить обработчик нажатия клавиш для «дополнительного» ввода текста, чтобы выполнить то же действие, когда пользователь нажимает клавишу Enter:
$("#extra_input").keydown(function (event) {
if (event.keyCode == 0xa || event.keyCode == 0xd) {
addAnotherPerson();
$("#extra_input").val(""); // reset the value
}
});
Обязательно добавьте атрибут autocomplete="off" для «дополнительного» ввода текста.
Функция addAnotherPerson может отправлять асинхронный запрос POST, содержащий значение в текстовом поле «extra», обновляя DOM впоследствии, если это необходимо.
РЕДАКТИРОВАТЬ: Если вы также хотите поддерживать пользователей, у которых отключен Javascript, добавьте атрибуты name к каждой кнопке отправки с уникальным значением атрибута name для каждого вашего серверного приложения. сможет сказать, на какую кнопку нажал пользователь.
Взять, к примеру, этот код из http://www.alanflavell.org.uk/www/trysub.html:
<table>
<tr><td align=left><label for="aquavit_button"><input id="aquavit_button" type="submit" name="aquavit" value="[O]"> Aquavit</label></td></tr>
<tr><td align=left><label for="beer_button"><input id="beer_button" type="submit" name="beer" value="[O]"> Beer</label></td></tr>
<tr><td align=left><label for="champagne_button"><input id="champagne_button" type="submit" name="champagne" value="[O]"> Champagne</label></td></tr>
<tr><td align=left><label for="water_button"><input id="water_button" type="submit" name="water" value="[O]"> Dihydrogen monoxide</label></td></tr>
</table>
Если пользователь нажимает кнопку «[O]» рядом с «Пивом», браузер отправляет переменную POST «beer», но не переменную POST «aquavit», «champagne» или «water». Попробуйте в http://www.alanflavell.org.uk/www/trysub.html.
Одна сложная проблема с этой техникой - это случай, когда пользователь отправляет форму, нажимая клавишу Enter при вводе текста. Firefox отправляет переменную POST для первой кнопки отправки в форме (в данном случае «aquavit»), тогда как Internet Explorer не отправляет переменную POST для любой из кнопок отправки. Вы можете исправить эту разницу, добавив скрытую, безымянную кнопку отправки в самом начале формы:
<form action="bigform.php"><input type="submit" style="display:none;" />
<!-- ... -->
EDIT2: Если вы всегда будете уверены, что значение в «дополнительном» текстовом вводе очищено Javascript перед отправкой большой формы, то вы сможете определить, есть ли у пользователя Javascript отключено и они нажимают клавишу Enter при вводе «лишнего» текста (указывая, что они хотят выполнить действие добавления человека), проверяя, не является ли «лишняя» переменная POST пустой на стороне сервера , Если он не пустой, вы можете предположить, что у пользователя отключен Javascript и что он хочет добавить пользователя.
Добавить этот код:
$("#bigform").submit(function (event) {
$("#extra_input").val(""); // reset the value in the "extra" text input
return true;
});