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

Answer 1

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