DYNAMIC FORM: how to pass a data as multi-dimensional array (Struts 2)

Question

Is this what they call the DYNAMIC FORMs?
HTML

<div id="myForm">
  <form method="post">
    <input type="text" name="question1" placeholder="Question 1"/>
    <input type="text" name="item1" placeholder="Item 1"/>

    <a href="#" onclick="addItem();">Add more items</a>
    <a href="#" onclick="addQuestion();">Add new question</a>
  </form>
</div>

<script> 
   function addQuestion() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="item2"/>');
   }
   function addItem() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="item2"/>');
   }
</script>

As a student, it is really complicated for me to think about these stuffs.
My problem is that, I do not have any idea on how to pass multiple items or data on a form. And even what to put on a name attribute of an <input>. Also, if the user add more items! How could I pass these unexpected number of data.
Example also when the user wants to add more items or options.
Or should I implement these logic:

<form>...</form>
<a href="#" onclick="addForm();">Add a question</a>
<script>//codes to add new form</script>

And what I'm gonna do is just know how to pass multiple form. But if I do that, will the Struts2 (request.getParameter() in mvc) to identify the data passed?

Please help,, this is just so complicated from a student like me.

EDITED: The data to be pass is like a multi-dimensional array. For example:

[question1, [item1, item2, item3]],
[question2, [item1, item2, item3, item4]]
[question3, [item1, item2]]

In other words, in the form, the user can add more question, and in each question the user can add more items.

The main function is that the user can create multiple-choice quiz. So in each questions, there would be any number of item. Where item = options or choices.

Answer 1

You can map request variables to a list of beans in struts2. Assuming you have the Parameters interceptor defined or are using the defaultStack.

1) Define a bean that contains

String question;
List<String> items;

2) Expose this bean as a list in your action class

List<MyBean> questions;

3) In your jsp send the request parameters like this.

<input type="text" name="questions[0].question" placeholder="Question 1"/>
<input type="text" name="questions[0].items[0]" placeholder="Item 1"/>
<input type="text" name="questions[0].items[1]" placeholder="Item 2"/>
<script> 
   var qcounter = 1;
   var icounter = 2;
   function addQuestion() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="questions[' + qcounter + '].question" placeholder="Question ' + (++qcounter) + '"/>');

      icounter = 0;

   }
   function addItem() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="questions[' + (qcounter - 1) + '].items[' + icounter + ']" placeholder="Item ' + (++icounter) + '"/>');
   }
</script>

You will have to consider what do when clicking the Add question button, in my example I am assuming that you want to reset the item count for the new question.

Here is a similar question about tabular form inputs in struts2. POST an array of custom objects to a Struts 2 action Hope this gives you an idea.

Answer 2

I have done some thing for this, the sample code below.. in struts 2.x

addRow.jsp

<div id="myForm">
  <form method="post" action='submitForm.action'>
    <input type="text" name="questions" placeholder="Question 1"/>
    <input type="text" name="items" placeholder="Item 1"/>

    <a href="#" onclick="addItem();">Add more items</a>
    <a href="#" onclick="addQuestion();">Add new question</a>
 <input type="submit" value="submit" /> 
 </form>
</div>

<script> 
   function addQuestion() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="questions"/>');
   }
   function addItem() {
      // codes to add more input type=text like:
      $('#myForm').append('<input type="text" name="items"/>');
   }
</script>

AddRowAction.java

package action;    
import com.opensymphony.xwork2.ActionSupport;
    /**
     *
     * @author Prabhakar
     */
    public class AddRowAction extends ActionSupport{

    private String[] items;
    private String[] questions;

       public String[] getItems() {
            return items;
        }

        public void setItems(String[] items) {
            this.items = items;
        }

        public String[] getQuestion() {
            return question;
        }

        public void setQuestion(String[] question) {
            this.question = question;
        }


    public String getFormData()
    {

    for(String question : questions)

    System.out.println("The question in the index "+i+" is "+question)

    }
    for(String item : items)

    System.out.println("The Item in the index "+i+" is "+item)

    }
    return SUCCESS;
    }

struts.xml

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<!-- Author: Prabhakar -->
 <struts>

<package name="action.AddRowAction" extends="struts-default">

<action name="submitForm" class="action.AddRowAction"
        method="getFormData" >
    <result name="success">/addRow.jsp</result>
    </action>  
  </package>
</struts>