Вопрос

Я пытаюсь создать динамическую форму, используя 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> элемент.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top