Dynamic Forms in Spring

Question

I am trying to make a dynamic form using Spring forms. Basically, the form gets a title of learning activity and then there's the a button below it that says, "Add one more Learning Activity". This makes it possible for the user to add one more learning activity. I want him to be able to add as much as he likes.

I haven't tried this before so obviously I encountered errors with the first solution I thought of. I really had a feeling doing what I did will generate an error but just do drive home what I am trying to do, here's the 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>

Jacob Mattison · Accepted Answer · 2009-09-18T13:50:24.667

8

You can't use <form:input> within the javascript because is a jsp tag that runs on the server-side.

However, there's nothing magical about how an HTML input gets bound to a field in the Spring command object; it's just based on the name. So in your javascript, add a new <input type="text" name="activity[1].activity"> (for example -- obviously you'll increment the index).

Another option I've used for more complicated controls is to grab the HTML of the existing control (which was created using the Spring form:input tag) and clone it, replacing the indexes with the incremented number. This gets a lot easier if you use jQuery.

EDITED TO ADD: One issue that may cause you problems: you're appending your new input box to the end of your outer div ("text"), which means it's not inside the form tags. That won't work.

edited Sep 18 '09 at 13:50

answered Sep 17 '09 at 20:55

Jacob Mattison

50,258
9
107
126

I tried doing this but the the values of the generated forms are not bound to the command class. Only the one that I explicitly set in the spring form is bound e.g In the code above: – Jeune Sep 18 '09 at 13:05
"One issue that may cause you problems: you're appending your new input box to the end of your outer div ("text"), which means it's not inside the form tags. That won't work." I addressed this already I appended the new input boxes inside another div within the form tags, still the appended input boxes don't bind. – Jeune Sep 18 '09 at 16:05
1

Can you give an example of your appended input box? I have used this approach to do exactly this and it does work. An input box named "activity[1].activity" should bind to the second item in your activity list (assuming it has an "activity" field), etc. – Jacob Mattison Sep 18 '09 at 17:26
I finally made it to work! Thanks a lot. :) Here's my blogpost about it: http://jeungun.wordpress.com/2009/09/18/binding-to-dynamically-generated-form-elements-in-spring-mvc/ – Jeune Sep 18 '09 at 18:10
@Jeune oh no that link doesn't work! Can you help me what you did there? – Faraz Sep 11 '16 at 02:33
@Faraz -- the Internet Archive has a copy of Jeune's blog post here: http://web.archive.org/web/20130707003828/http://jeungun.wordpress.com/2009/09/18/binding-to-dynamically-generated-form-elements-in-spring-mvc/ – Jacob Mattison Sep 12 '16 at 14:41
@JacobMattison Ty so much Jacob. I already found a somewhat similar solution elsewhere: http://stackoverflow.com/a/10233551/4828463 and http://stackoverflow.com/a/9993144/4828463 . Thanks for digging up that link for me. Much appreciated. – Faraz Sep 13 '16 at 05:06

score 1 · Answer 2 · answered Sep 17 '09 at 13:57

1

Is <form:input> a JSP tag? If so, then client-side Javascript to add <form:input> nodes to the DOM will have no effect - since the server-side JSP engine is not interpreting those.

Your Javascript needs to work with raw HTML and DOM, such as adding an <input> element.

answered Sep 17 '09 at 13:57

matt b

138,234
66
282
345

Yes it's a jsp tag for Spring. I've thought of just brute-forcing the forms already by just getting the parameters from the request directly. However, I wanted to use Spring's SimpleFormController ability to bind the form fields to a command class. I was just wondering if there's a way to do it in my situation. Cheers! – Jeune Sep 17 '09 at 15:37

Dynamic Forms in Spring

2 Answers2

Linked