JSP中input内容改变触发onchange事件使用

来源：互联网发布：哪些是应用层网络协议编辑：程序博客网时间：2024/05/15 08:24

最近做的一个成绩的比例添加的功能，需求是平时比例和期末比例为100%，而为了减少让用户的思考，让界面更人性化，其实我们可以在输入平时比例时，期末比例自动加载，这时就要使用jsp中input的内容改变需要触发的一个事件：onchange（）。

效果图：

JSP中input定义：

<!-- 添加比例设置表单------><div id="addResultRule" class="easyui-dialog" title="添加成绩比例信息" buttons="#dlg-buttons" style="width:400px;height:310px" data-options="resizable:true,modal:true "  <span style="color:#ff0000;">closed="true"</span>><span style="color:#ff0000;">//否则表单一上来就加载</span><form id="fmResultRule" method="post" novalidate><div class="fitem" style="margin-left: 90px;margin-top:30px"><label style="font-size: 14px" >学年:</label> <input class="easyui-combobox" style="height:25px;width:150px" id="schoolcalendarId" name="schoolcalendarId" required="true" data-options="valueField:'id',textField:'termName',url:'getSchoolCalendar' "/><br></div>            <div class="fitem" style="margin-left: 62px; margin-top:10px"><label for="name"  style="font-size: 14px">课程名称:</label> <input class="easyui-combobox" style="height:25px;width:150px" required="true" id="courseId" name="courseId"  data-options="editable:false"  align="center"/><br></div><div class="fitem" style="margin-left: 90px; margin-top:10px"><label for="name"  style="font-size: 14px" >教师:</label> <input class="easyui-combobox" style="height:25px;width:150px" id="teacherId" name="teacherId" required="true" data-options="editable:false" align="center"/><br></div><div class="fitem" style="margin-left: 36px; margin-top:10px"><label for="name" style="font-size: 14px">平时成绩比例:</label>  <input id="dailyResultRule"  onchange="<span style="font-size:24px;color:#ff0000;">changeRule()</span>" style="height:22px;width:148px" name="dailyResultRule" class="easyui-validatebox" type="text" required="true" /><br>        </div><div class="fitem" style="margin-left: 36px; margin-top:10px"><label for="name"  style="font-size: 14px">期末成绩比例:</label> <input id="finalResultRule" style="height:22px;width:148px"<span style="color:#ff0000;"> readonly="true"</span> name="finalResultRule" class="easyui-validatebox" type="text"  ></div></form></div>    <div id="dlg-buttons"><a href="javascript:void(1)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveAdd()" style="margin-left:50px;  width:90px">确认</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addResultRule').dialog('close')" style="width:90px; margin-left: 70px; margin-right: 70px;">取消</a></div>

JS中函数定义：

/** * <span style="font-family: Arial, Helvetica, sans-serif;">显示</span><span style="font-family: Arial, Helvetica, sans-serif;">期末比例</span> */function <span style="font-size:24px;color:#ff0000;">changeRule()</span>{var dailyResult=eval(document.getElementById('dailyResultRule')).value ;//获得dailyResultRule控件的值 var   r   = /^[0-9]*[1-9][0-9]*$/;  if (r.test(dailyResult) == false) {  alert("请输入100以内的正整数！")  return false; } else{ if(Number(dailyResult)>100){ alert("百分比不能大于100！") return false; } }  var dailyRate = dailyResult + "%";//平时比例document.getElementById('dailyResultRule').value=dailyRate;//平时比例赋值给dailyResultRule控件var finalResultRate=eval(100-Number(dailyResult));//计算期末比例var finalRate=finalResultRate+ "%";//期末比例document.getElementById('finalResultRule').value=finalRate;//期末比例赋值finalResultRule控件}

0 0