同一页面不同按钮引用相同modal +点击按钮,给相同name的input框赋值+通过ajax提交相同name的input框
1.按钮
onclick中传入不同参数,js会根据参数进行区分
<button class="btn btn-mini btn-info" type="button" data-toggle="modal" onclick="Values('shenhe')">评分</button>
2.js代码
acator 会接收到不同的参数,id为modal框的id
function Values(actor){
$('#myModal').modal('show');
}
3.modal框
主体分为三部分, 我们主要操作为modal-body,这里我加了个批量评分,点击按钮,给下面框赋值
3.1 示例图
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">
评分
</h4>
</div>
<div class="modal-body">
<p > 请输入分数,最高分数为100%</p>
<div>
<input id="all" name="all" style="width:75%"></input>
<button type="button" onclick="allScore()">批量评分</button>
</div>
<br>
<br>
<form id="reimburseForm">
<table class="table table-bordered center" id="recordTable">
<thead>
<tr class="center" >
<th class="center">姓名</th>
<th class="center">得分(%)</th>
</tr>
</thead>
<tbody>
<c:forEach items="${info }" var="infoscore">
<input type='hidden' value="${infoscore.id}" id="scoreid" name="scoreid" />
<tr>
<td class="center">${infoscore.userName }</td>
<td class="center"><input id="ret" name="ret" value=""/></td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="vali()" data-dismiss="modal">提交</button>
<span id="tip"></span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
3.2批量评分 js
function allScore(){
var all =$("#all").val();
$("input[name='ret']").each(function(){
$(this).val(all);
})
}
3.3 ajax 传给后台
我是通过 jquery提交form表单的方式,这个最简单(modal框嵌套form表单,若之前有form表单,要在form表外面写另一个form,form表单若出现嵌套会失效)
function vali(){
$.ajax({
type:"post",
url:"url,
data:$("#reimburseForm").serialize(),
dataType:"json",
async:false, //false为同步执行
cache:false, //false不会从浏览器缓存中加载请求信息
success: function(data){
if(data.result=="success"){
history.go(0)
}
}
});
}
3.3后台接收方式
创建 两个 数组,给上get,set 方法,就OK了
private Double [] ret;
private String [] scoreid;