Dynamiczne formy na wiosnę

Question

Próbuję stworzyć dynamiczną formę za pomocą form sprężynowych. Zasadniczo formularz otrzymuje tytuł aktywności szkoleniowej, a następnie znajduje się pod nim przycisk z napisem "Dodaj jeszcze jedną aktywność edukacyjną". Dzięki temu użytkownik może dodać jeszcze jedno działanie edukacyjne. Chcę, żeby mógł dodać tyle, ile mu się podoba.

Nie próbowałem tego wcześniej, więc oczywiście napotkałem błędy przy pierwszym rozwiązaniu, o którym myślałem. Naprawdę miałem wrażenie robi to, co zrobiłem wygeneruje błąd, ale po prostu nie jechać do domu, co próbuję zrobić, oto kod:

<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> 

Answer 1

Nie można używać < form:input> w javascript, ponieważ jest to znacznik jsp, który działa po stronie serwera.

Jednak nie ma nic magicznego w tym, jak dane wejściowe HTML zostaną powiązane z polem w obiekcie polecenia Spring; opiera się tylko na nazwie. Więc w twoim javascriptu dodaj nowy <input type="text" name="activity[1].activity"> (na przykład - oczywiście zwiększysz indeks).

Inną opcją, której użyłem do bardziej skomplikowanych kontroli, jest pobranie kodu HTML istniejącego formantu (który został utworzony za pomocą formularza Spring: input tag) i sklonowanie go, zastępując indeksy zwiększoną liczbą. Staje się to o wiele łatwiejsze, jeśli używasz jQuery.

EDYCJA DO ADD: Jedna kwestia, która może powodować problemy: dodajesz nowe pole wprowadzania do końca zewnętrznego elementu div ("tekst"), co oznacza, że ​​nie ma go w tagach formularza. To nie zadziała.

Answer 2

Czy <form:input> tag JSP? Jeśli tak, to JavaScript po stronie klienta, aby dodać węzły <form:input> do DOM, nie przyniesie żadnego skutku - ponieważ silnik JSP po stronie serwera ich nie interpretuje.

Twoja Javascript musi działać z surowym HTML i DOM, np. Dodając element <input>.