模态窗口提交表单

最新推荐文章于 2021-06-08 16:30:54 发布

Lenux2017

最新推荐文章于 2021-06-08 16:30:54 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/Lenux2017/article/details/77539996

ajax 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何利用模态窗口提升用户在网页中提交表单的体验。模态窗口提供了一种不离开当前页面即可完成交互的方式，减少了用户在页面间跳转的困扰，同时保持了页面的整洁。通过实例分析，我们展示了如何设计和实现一个响应式的模态表单，包括验证、错误提示和提交处理等关键功能，旨在提高用户转化率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/jquery-1.8.0.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/common-artdiag.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/JS/artDialog/css/ui-dialog.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/artDialog/dist/dialog-plus-min.js"></script>
<!-- 
<script type="text/javascript">
	function add(){
		location.href="add.jsp";
	}
</script>
 -->
</head>
<body>


<!-- ====================模态窗口div======================================= -->
<div id="divId" style="display: none;">	
	<center>
	<form>
		<table border="1px" width="500px">
			<tr>
				<td>订单流水号</td>
				<td>
					<input type="text" name="orderNum" id="numID" onblur="getNum()">
				</td>
			</tr>
			<tr>
				<td>订单金额</td>
				<td>
					<input type="text" name="orderPrice">
				</td>
			</tr>
			<tr>
				<td>收货人</td>
				<td>
					<select name="addr.addrId">
						<option value="0">-请选择-</option>
						<option value="1">-张三-</option>
						<option value="2">-李四-</option>
						<option value="3">-王五-</option>
						<option value="4">-赵柳-</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>订单类型</td>
				<td>
					<input type="radio" name="orderType" value="1">店铺自营
					<input type="radio" name="orderType" value="2">第三方卖家
				</td>
			</tr>
		</table>
		</form>
	</center>
	
</div>
<script type="text/javascript">
	
	//模态窗口新增
		function add(){
			var add_from = dialog({
		        title: '提交订单',//标题
		        content:$("#divId"),//展示内容，

 			//其他写法：展示的页面，通过action跳转  content:getDivByUrl("selectAction_noReturn.action"),
		     // 直接展示指定页面   content:getDivByUrl("add.jsp"), 
		      
// 		       	height:"300px",  不指定宽高自动适应	
// 			width:"240px",
		        okValue: 'ok',//确定点击按钮名称
		        ok: function () {//确定按钮绑定函数
		        	$.ajax({
		        		url:"selectAction_add.action",
		        		type:"post",
		        		data:$("form").serialize(),
// 		        		dataType:"text",    无需action的返回值时，可以不指定
		        		success:function(){
		        			alert("新增成功");
		        			location.href=location; //跳转url action对应的result
		        		},
		        		error:function(){
		        			alert("ajax程序add错误！");
		        		}
		        	})
		        	
		        },
		        cancelValue: 'no',//取消点击按钮名称
		        cancel: function () {//取消点击按钮绑定函数
		        }
		    });
			
		    //调用展示非模态窗口
		    //add_from.show();
		    //调用展示模态窗口
		  add_from.showModal();
	}
	</script>

</body>
</html>