Динамичные формы весной
-
10-07-2019 - |
Вопрос
Я пытаюсь создать динамическую форму, используя Spring forms.По сути, форма получает название учебного действия, а затем под ней появляется кнопка "а" с надписью "Добавить еще одно учебное действие".Это позволяет пользователю добавить еще одно учебное задание.Я хочу, чтобы он мог добавлять столько, сколько ему нравится.
Я не пробовал этого раньше, поэтому, очевидно, я столкнулся с ошибками в первом решении, которое пришло мне в голову.У меня действительно было ощущение, что выполнение того, что я сделал, приведет к ошибке, но просто сделайте то, что я пытаюсь сделать, вот код:
<script language="javascript">
fields = 0;
function addInput() {
document.getElementById('text').innerHTML += "<form:input path='activity[fields++].activity'/><br />";
}
<div id="text">
<form:form commandName="course">
Learning Activity 1
<form:input path="activity[0].activity"/>
<input type="button" value="add activity" onclick="addInput()"/>
<br/><br/>
<input type="submit"/>
</form:form>
<br/><br/>
</div>
Решение
Вы не можете использовать <form:input>
внутри javascript because - это тег jsp, который выполняется на стороне сервера.
Однако нет ничего волшебного в том, как вводимый HTML-код привязывается к полю в объекте Spring command;это просто основано на названии.Итак, в вашем javascript добавьте новый
<input type="text" name="activity[1].activity">
(например, очевидно, что вы увеличите индекс).
Другой вариант, который я использовал для более сложных элементов управления, - это захватить HTML существующего элемента управления (который был создан с использованием тега Spring form:input) и клонировать его, заменив индексы увеличенным числом.Это становится намного проще, если вы используете jQuery.
ОТРЕДАКТИРОВАНО Для ДОБАВЛЕНИЯ:Одна проблема, которая может вызвать у вас проблемы:вы добавляете свое новое поле ввода в конец вашего внешнего div ("текст"), что означает, что оно не находится внутри тегов формы.Это не сработает.
Другие советы
Является <form:input>
тег JSP?Если это так, то Javascript на стороне клиента для добавления <form:input>
узлы для DOM не будут иметь никакого эффекта - поскольку серверный JSP-движок не интерпретирует их.
Ваш Javascript должен работать с необработанным HTML и DOM, например, добавлять <input>
элемент.