模态框数据提交

最新推荐文章于 2023-11-20 08:12:16 发布

原创最新推荐文章于 2023-11-20 08:12:16 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#模态框提交

javaEE 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文详细讲解了如何在网页中使用模态框进行数据提交操作，包括创建模态框、设置表单、处理提交事件以及验证和发送数据到服务器的过程。通过实例代码展示实现步骤，帮助开发者更好地理解和应用模态框提交技术。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加评价</h4>
				</div>
				<div class="modal-body">
					<form id="updateform" class="form-horizontal"  action="${pageContext.request.contextPath }/comment?name=${user.username }&pid=${product.pid }" method="post" >

						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label"
								name="gender">评价</label>
							<div class="col-sm-10">
								<label class="radio-inline"> <input type="radio"
									name="gender" id="gender" value="好"
									checked="checked"> 好
								</label> <label class="radio-inline"> <input type="radio"
									name="gender" id="gender" value="差">差
								</label>
							</div>

						</div>

						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">请输入评价</label>
							<div class="col-sm-6">
								<!-- <input type="text" class="form-control" id="comment_add"
									name="empName" placeholder="请输入评价"> -->
									<!-- <textarea class="form-control" rows="3" id="text1" name="text1"></textarea> -->
							<input type="text" class="form-control"  id="text1"  name="text1"
									placeholder="请输入评价">
								<span class="help-block"></span>
							</div>
						</div>

               <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="submitBtn"  type="button" class="btn btn-primary" onclick="add_info()">更新</button>
				</div>

					</form>
				</div>
				
			</div>
		</div>
	</div>



<script type="text/javascript">
function add_info()
	    {
	        var form = document.getElementById('updateform');
	        form.submit();
	        $("#myModal").on("hidden.bs.modal", function() {
	            $(this).removeData("bs.modal");
	        });
	 
	    }
</script>






protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	// TODO Auto-generated method stub
    	String gender=request.getParameter("gender");
		String text1=request.getParameter("text1");
		String name=request.getParameter("name");
		String pid=request.getParameter("pid");
		int state;
		if(gender.equals("好"))state=1;else state=0;
		String id=CommonsUtils.getUUID();
		service.commentAdd(id,pid,name,text1,state);
		
	
		response.sendRedirect(request.getContextPath() + "/product?method=productInfo1&pid="+pid);