同一页面不同按钮引用相同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,这里我加了个批量评分,点击按钮,给下面框赋值,多个name相同的input框,我通过C标签循环出来的
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>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
						<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;

猜你喜欢

转载自blog.csdn.net/qq_41035779/article/details/85275935