Динамическое создание Struts 2 форм на JSP с помощью сценария Java

Question

Что мне требуется, это довольно стандартная функция. И я уверен, что это достаточно просто, но почему-то я не могу этого сделать. Пожалуйста, помогите мне здесь.

Это сценарий ->

У меня есть форма распорок на jsp, которая принимает информацию о сотрудниках. Теперь с каждым сотрудником я хочу связать некоторых членов семьи.

Итак, для информации членов семьи я хочу:

1.) Строка - 1 элемент выбора и 3 элемента текстового поля - в конце формы.

2.) Кнопка «Добавить», которая добавляет такие строки по требованию для добавления других членов семьи.

Я не знаю, как прикрепить снимок экрана, чтобы дать вам точное представление о том, чего я хочу.

Я пытался сделать это, используя javascript, но javascript добавляет стандартные элементы HTML, из-за чего я не могу получить доступ к значению этих полей в своем классе действий. (Пожалуйста, скажите, если это не так, потому что тогда остается только один вопрос: почему я не могу получить доступ к этим значениям?

В настоящее время я пытаюсь:

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>

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);
}

Благодаря этому я могу добавить новую строку указанных элементов, но не могу получить доступ к значениям поля в классе действий. Я хотел бы отметить, что я не могу получить доступ даже к элементам первой строки в классе действия (возможно, потому что они являются стандартным HTML).

Любая помощь приветствуется.

Спасибо !!

Answer 1

вот решение проблемы, для тех, кто все еще застрял на ней.

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

JS:

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

Тогдав классе действия просто определите переменные следующим образом:

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

Определите их методы получения и установки, и вы можете получить доступ к каждому элементу каждой строки в jsp следующим образом:

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

Что касается копирования значения элемента select в клонированную строку, то это простой javascript.Просто сделайте это:

    clonedSelect.selectedIndex = original.selectedIndex;

Если у вас все еще есть проблемы, оставьте комментарий.:)