使用java脚本在jsp上动态创建struts 2表单 [英] Creating struts 2 forms dynamically on jsp using java script
问题描述
我需要的是一个非常标准的功能。我相信它很容易，但不知何故我无法做到这一点。请帮助我。
这是场景 - >
我有一个struts表单jsp，它接收员工信息。现在，每一位员工都想与一些家庭成员联系在一起。
因此，对于我想要的家庭成员的信息：1）在表单的结尾处有一行 - 1个选择元素和3个文本字段元素 - 。
2。）一个'添加'按钮，用于添加更多家庭成员。我不知道如何附加一个屏幕截图，让你确切知道我想要什么。
我试过这样做，使用javascript，但javascript添加了标准的HTML元素，因为我无法访问我的动作类中这些字段的值（请告诉我，如果情况并非如此，因为那么唯一的问题就是，为什么我无法访问这些值）
目前我正在尝试：
JSP：
< s：form name =enterEmployeeInfoid =enterEmployeeInfoaction =enterEmployeeInfo>
////其他形式元素//////////////
< table>
< tr>
< td>关系< / td>
< td>名称< / td>
< td>年龄< / td>
< td>占领< / td>
< / tr>
< tr>
< td>
< select name =rel>
< option value =>< / option>
< option value =Father> Father< / option>
< option value =母亲>母亲< / option>
< option value =配偶>配偶< / 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 =4align =right>< button type =buttononclick =tryFunc（this.parentNode）;> Add< / button>< / td>
< / tr>
< / table>
< s：submit value =Add Employeename =submit/>
< s：reset value =Resetname =reset/>
< / s：form>
JS：
函数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）。
任何帮助都是值得赞赏的。
感谢!!
这里是问题的解决方案，对于那些仍然坚持它。
在jsp中：
< s：form name =enterEmployeeInfoid =enterEmployeeInfoaction =enterEmployeeInfo>
////其他形式元素//////////////
< table>
< tr>
< td align =center>关系< / td>
< td align =center>名称< / td>
< td align =center>年龄< / td>
< td align =center>职业< / td>
< / tr>
< tr>
< td>
< select name =rel>
< option value =>< / option>
< option value =Father> Father< / option>
< option value =母亲>母亲< / option>
< option value =配偶>配偶< / 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 =4align =right>< button type =buttononclick =tryFunc（this.parentNode）;> Add< / button>< / td>
< / tr>
< / table>
< s：submit value =Add Employeename =submit/>
< s：reset value =Resetname =reset/>
< / s：form>
JS：
函数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 [];
定义它们的getter和setter，并且可以像这样访问jsp中每一行的每个元素：
rel [0]，rel [1]，........
rName [0]， rName [1]，.......
等......
至于将select元素的值复制到克隆行，其简单的javascript。只要做到这一点：
clonedSelect.selectedIndex = original.selectedIndex;
如果您仍有问题，请留言。 ：）
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!!
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. :)
这篇关于使用java脚本在jsp上动态创建struts 2表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
