Creating struts 2 forms dynamically on jsp using java script

Question

What I require is a pretty standard feature. And I am sure its easy enough, but somehow I cant make it happen. Please help me out here.

This is the scenario-->

I have a struts form on a jsp, which takes in employee information. Now with every employee I want to associate some family members.

So for information of family members I want :

1.) A row of -- 1 select element and 3 text field elements -- in the end of the form.

2.) A 'add' button which appends such rows on demand for adding more family members.

I dont know how I can attach a screen shot to give you exact idea of what I want.

I have tried doing this, using javascript, but javascript adds standard HTML elements, because of which I am not able to access the value of those fields in my action class.(Please tell me if this is not the case, because then the only question that will remain is, why am I unable access those values)

Currently what I am trying:

JSP:

<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">

    ////OTHER FORM ELEMENTS//////////////

        <table>
        <tr>
            <td>Relationship</td>
            <td>Name</td>
            <td>Age</td>
            <td>Occupation</td>
        </tr>
        <tr>
            <td>
                <select name="rel">
                    <option value=""></option>
                    <option value="Father">Father</option>
                    <option value="Mother">Mother</option>
                    <option value="Spouse">Spouse</option>
                    <option value="Child">Child</option>
                </select>
            </td>
            <td> <input name="rName[]"/></td>
            <td> <input name="rAge"/>          </td>
            <td> <input name="rOccupation"/>   </td>
            <td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
        </tr>
        </table>
        <s:submit value="Add Employee" name="submit"/>
        <s:reset  value="Reset"       name="reset"/>
</s:form>

The JS:

function tryFunc(node){
    var root = node.parentNode.parentNode;
    var allRows = root.getElementsByTagName('tr');
    var cRow = allRows[1].cloneNode(true);
    var cInp = cRow.getElementsByTagName('input');
    for(var i=0;i<cInp.length;i++){
        cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
    }
    var cSel = cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
    root.appendChild(cRow);
}

With this I am able to add a new row of specified elements, but unable to access the field values in the action class. I would like to point out that I am not able to access even the first row's elements in action class (probably because they are standard HTML).

Any help is appreciated.

Thanks!!

What you mean by Standard element?? even if you use struts2 tags they will be converted in to HTML when browser render them.tags are only for some convience — Umesh Awasthi
– Umesh Awasthi, Commented Jan 3, 2012 at 10:40
Well the tables is being created since you are using x_html theme which means those tables are being generated.if you don't want that table and TD use simple theme. can-i-change-theme-on-a-per-page-basis. Regarding communication if you want to pull some data from the ValueStack only than it required.Show you action class as that needs same property name what you are sending from your form — Umesh Awasthi
– Umesh Awasthi, Commented Jan 3, 2012 at 11:24
You can declare Array,List,Map what ever you want,struts2 will take care of converting your incoming data to expected data-type all you need to do is when you want it as an Array or List, name should be same in your jsp page so Struts2 will know that you are sending the Array/List — Umesh Awasthi
– Umesh Awasthi, Commented Jan 3, 2012 at 11:45
@Umesh : I tried it. In textfield I put name='rName[]' and in action class I declared a variable like this private String rName[];. Then I defined getter and setter. But I am getting nullpointerException in this for(int i=0;i<rName.length;i++){ System.out.println(i + " : " + rName); }. Any ideas why? Do you need more information? — kanishk
– kanishk, Commented Jan 3, 2012 at 15:30
aha..You need array in your action only when you are sending array/list from your jsp like <s:textfiled name="rName"> and such more fields with same name so they will be placed inside the array of your action — Umesh Awasthi
– Umesh Awasthi, Commented Jan 3, 2012 at 15:55

kanishk · Accepted Answer · 2012-01-04 11:35:22Z

here is the solution to the problem, for those still stuck on it.

In the jsp:

<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">

    ////OTHER FORM ELEMENTS//////////////

        <table>
            <tr>
                <td align="center">Relationship</td>
                <td align="center">Name</td>
                <td align="center">Age</td>
                <td align="center">Occupation</td>
            </tr>
            <tr>
                <td>
                    <select name="rel">
                        <option value=""></option>
                        <option value="Father">Father</option>
                        <option value="Mother">Mother</option>
                        <option value="Spouse">Spouse</option>
                        <option value="Child">Child</option>
                    </select>
                </td>
                <td> <input name="rName"/></td>
                <td> <input name="rAge"/>          </td>
                <td> <input name="rOccupation"/>   </td>
            </tr>
            <tr>
                <td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
            </tr>
        </table>
        <s:submit value="Add Employee" name="submit"/>
        <s:reset  value="Reset"       name="reset"/>
</s:form>

The JS:

function tryFunc(node){
    var root = node.parentNode.parentNode;
    var allRows = root.getElementsByTagName('tr');
    var cRow = allRows[1].cloneNode(true);
    root.appendChild(cRow);
}

Then in the action class, just define a variables like this:

    private String rel[];
    private String rName[];
    private String rAge[];
    private String rOccupation[];

Define their getters and setters, and you can access each element of each row in jsp like this :

    rel[0], rel[1], ........
    rName[0],rName[1], .......
    etc......

As for copying the Value of select element to cloned row, its simple javascript. Just do this:

    clonedSelect.selectedIndex = original.selectedIndex;

If you still have issues, comment. :)

Collectives™ on Stack Overflow

Creating struts 2 forms dynamically on jsp using java script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related