Dynamische Formulare im Frühjahr

Question

Ich versuche, ein dynamisches Formular mit Spring-Formen zu erstellen. Im Grunde erhält das Formular einen Titel der Lernaktivität und dann gibt es die a-Schaltfläche darunter, die "Eine weitere Lernaktivität hinzufügen" enthält. Dies ermöglicht es dem Benutzer, eine weitere Lernaktivität hinzuzufügen. Ich möchte, dass er so viel hinzufügen kann, wie er möchte.

Ich habe das vorher nicht versucht, also offensichtlich habe ich Fehler mit der ersten Lösung gefunden, an die ich gedacht habe. Ich hatte wirklich das Gefühl, zu tun, was ich tat, wird einen Fehler generiert, sondern nur nach Hause fahre, was ich zu tun versuche, hier ist der Code:

<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

Sie können < form:input> nicht innerhalb des Javascript verwenden, da es ein JSP-Tag ist, das auf der Serverseite ausgeführt wird.

Es ist jedoch nichts Magisches darüber, wie eine HTML-Eingabe an ein Feld im Spring-Befehlsobjekt gebunden wird. Es basiert nur auf dem Namen. Fügen Sie also in Ihrem Javascript einen neuen <input type="text" name="activity[1].activity"> hinzu (zum Beispiel - Sie erhöhen natürlich den Index). Eine andere Option, die ich für kompliziertere Steuerelemente verwendet habe, ist, den HTML-Code des vorhandenen Steuerelements (das mit dem Spring form: input-Tag erstellt wurde) zu klonen und es zu klonen, wobei die Indizes durch die inkrementierte Zahl ersetzt werden. Dies wird viel einfacher, wenn Sie jQuery verwenden.

BEARBEITEN ZUM HINZUFÜGEN: Ein Problem, das zu Problemen führen kann: Sie fügen Ihr neues Eingabefeld an das Ende Ihres äußeren div ("text") an, was bedeutet, dass es sich nicht in den form tags befindet. Das wird nicht funktionieren.

Answer 2

Ist <form:input> ein JSP-Tag? Wenn dies der Fall ist, hat clientseitiges JavaScript, um dem DOM <form:input> Knoten hinzuzufügen, keinen Effekt - da die serverseitige JSP-Engine diese nicht interpretiert.

Ihr Javascript muss mit Raw HTML und DOM arbeiten, z. B. ein <input> Element hinzufügen.