读书人

这个该如何取值呢?小弟我的js水平太菜

发布时间: 2013-09-07 14:12:44 作者: rapoo

这个该怎么取值呢?我的js水平太菜!!请大神指点一二。。


jsp源码:


<div id="tabb">
<fieldset>
<legend>摆货详情</legend>
<div style="width:100%; font-family:'宋体';font-size:12px;">
物料总数量:
<input type="text" name="TextField_1" value="19" id="TextField_1" style="display:none"/>
<input type="text" name="receiptQuan" value="<s:property value="#session.materiel.inventory"/>" id="receiptQuan" style="border-bottom:0" readonly="true" class="input1"/>
物料名称:
<input type="text" name="TextField_2" value="<s:property value="#session.materiel.matname"/>" id="TextField_2" style="border-bottom:0" readonly="true" class="input1"/>
<input type="text" name="TextField_3" value="5" id="TextField_3" style="display:none"/>
物料编号:
<input type="text" name="TextField_2" value="<s:property value="#session.materiel.id"/>" id="TextField_2" style="border-bottom:0" readonly="true" class="input1"/>

</div>
<form name="form2">
<ul>
<s:if test="#session.depotareas == null">
<s:fielderror key="depotGetError"/>
</s:if>
//循环仓位可以
<s:iterator value="#session.storageList" var="storage">
<li style=" height: 100px; width:150px; float:left; border: 1px solid yellow; text-align: center">
//此处是可以入库的仓位
<s:if test="#storage.stoarea<400">
//输入数量的地方
<input type="text" class="input2" style=" margin-left: -40px">
//记住仓位编号的地方隐藏域
<input id="storagesId" value="<s:property value="#storage.id"/>" style=" height:0px" type="hidden">
<img src="images/nos/103.gif" style=" margin: 0px auto;" align="top"><tr/>


</s:if>
//不能入库的仓位
<s:if test="#storage.stoarea>=400">
<input type="text" class="input3" style=" border: 0px"/>
<img src="images/nos/102.gif" style=" margin: 0px auto;" align="top"><tr/>
</s:if>
//仓位名称
<p style=" height: 8px; font-size: 12px; margin-top: -2px">仓位:<s:property value="#storage.storageid"/></p>
</li>
</s:iterator>
</ul>
</form>
</fieldset>
</div>



解释:
1.其中id为receiptQuan为本次要存入物料的总数量,id为TextField_2为物料的名称。
2.s:iterator 循环出所有的仓位。其中有的仓库已满的就没有输入框就是不能再放物料了。
3.没满的就有输入框可以入库操作,并且它的下方有一个隐藏域用于存仓位编号的。
4.我怎么判断用户在那几个没满的仓位上输入数据了并且同事有取出仓位编号(记住这是个循环仓位不一定是这么多)
5.就算用js取到值我怎么弄一个map类型的东西储存数据类似map<仓位编号,输入的数量>;
然后在点击保存的时候将这些数据传给action处理呢?
6.其中还有一个判断几个输入框数值之和不能大于物料的总数量。
7.还有怎么怎么判断用户输入的是不是数字。。

问题有点多,大神莫烦。。请指教!! JavaScript Iterator HTML 库
[解决办法]
1、你要取哪个DOM元素中的值,必须先取到该DOM。从你上面的代码得知。未满仓库的输入框为:<input type="text" class="input2" style=" margin-left: -40px">
JS取DOM元素需要有特定条件,例如 根据ID,或者根据标签,或者根据class。从你代码上来看,可以通过
var o = document.getElementsByClassName("class2") 获得所有class = "class2" 的DOM元素。这样就可以取到所有未满仓库的input。然后循环取该元素的value:
for(i in o){
alert(i.value)
}


2、你用于存放未满仓库ID的元素,该元素的id 统一都为storagesId。这样你是没法通过getElementByid("storagesId")取到所有仓库元素的。并且就算取到了,也无法与上面提到的输入数量进行对应。建议对源代码进行改造。例如:
将:


<s:if test="#storage.stoarea<400">
//输入数量的地方
<input type="text" class="input2" style=" margin-left: -40px">
//记住仓位编号的地方隐藏域
<input id="storagesId" value="<s:property value="#storage.id"/>" style=" height:0px" type="hidden">
<img src="images/nos/103.gif" style=" margin: 0px auto;" align="top"><tr/>
</s:if>


修改成:

<s:if test="#storage.stoarea<400">
//输入数量的地方
<input id="<s:property value="#storage.id"/>" type="text" class="input2" style=" margin-left: -40px">
//直接将输入域的id设置为仓库id

<img src="images/nos/103.gif" style=" margin: 0px auto;" align="top"><tr/>
</s:if>


这样通过 document.getElementsByClassName("class2") 取到输入数量的域后,通过value可以取到输入值,通过id可以取到仓库编号,且两值存在关联。
以上代码并没有考虑到 你的隐藏域是否有其他用途,所以我直接删除了。具体怎么改得看你的原设计。
另外 document.getElementsByClassName("class2")在有些浏览器中好像无法实现。建议使用jquery 中的$(".calss2")。
------解决方案--------------------


<s:if test="#storage.stoarea<400">
//输入数量的地方 ,加上Name属性
<input name="stoarea" type="text" class="input2" style=" margin-left: -40px">
//记住仓位编号的地方隐藏域,id改成 name
<input name="storagesId" value="<s:property value="#storage.id"/>" style=" height:0px" type="hidden">
<img src="images/nos/103.gif" style=" margin: 0px auto;" align="top"><tr/>
</s:if>


例子:取值,判断不能超过最大物料的总数量


<style>
.input2{ width:120px;margin-left:0px }

</style>
<form name="form2" onsubmit="return OnSubmit(this)" >
<div>
<ul>

<li style=" height: 100px; width:150px; float:left; border: 1px solid yellow; text-align: center">

<input name="storages" type="text" class="input2" >

<input name="storagesId" value="1" style=" height:0px" type="hidden">


<p style=" height: 8px; font-size: 12px; margin-top: -2px">仓位:11</p>


</li>

<li style=" height: 100px; width:150px; float:left; border: 1px solid yellow; text-align: center">

<input name="storages" type="text" class="input2" >

<input name="storagesId" value="2" style=" height:0px" type="hidden">


<p style=" height: 8px; font-size: 12px; margin-top: -2px">仓位:22</p>
</li>

<li style=" height: 100px; width:150px; float:left; border: 1px solid yellow; text-align: center">

<input name="storages" type="text" class="input2" >

<input name="storagesId" value="3" style=" height:0px" type="hidden">

<p style=" height: 8px; font-size: 12px; margin-top: -2px">仓位:33</p>
</li>

</ul>
</div>


<input type=submit value="提交" >

</form>

<script>

var Max=100;// 物料的总数量
function OnSubmit(f){
var sum=0;
for(var i=0;i<f.storagesId.length;i++){

alert( f.storagesId[i].value +':' + f.storages[i].value ); //测试 输出 storagesId:storages
sum+=parseInt(f.storages[i].value)
[解决办法]
0;
}
//不能大于物料的总数量
if(sum >Max ) {
alert('不能大于物料的总数量');
return false;
}

}
</script>

读书人网 >JavaScript

热点推荐