jsp bootstrap表单页面

简述:

这是一个bootstrp的jsp表单页面


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Mobile Upload</title>
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/upns.css">
    <script src="<%=basePath%>static/js/jquery-1.8.1.js"></script>
    <script src="<%=basePath%>static/js/bootstrap.js"></script>
    <link rel="stylesheet" href="<%=basePath%>static/css/colorbox.css" type="text/css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery.colorbox-min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-form/jquery.form.js"></script>
    
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading breadcrumb">
    		<li>修改应用</li>
    </div>
    <div class="panel-body">

	<form id="form" role="form" action="/upns-console/member/join" method="post">
	    <div class="form-group">
	         <label for="appId" class="col-lg-2 control-label">appID: ${app.appID }</label>
	         <input type="hidden" class="form-control" id="appID" name="appID" value="${app.appID }"/>
	    </div>
	    
	    <div class="form-group">
	        <label for="appId" class="col-lg-2 control-label">应用类型: ${app.type==0 ? "Android":"iOS"}</label>
	        <div class="col-lg-10">
				      <select name="sysName" style="display:none">
      	 	             ${app.type==0 ? "<option value=\"apk\">Android</option>":"<option value=\"ipa\">iOS</option>"}
      	              </select>
      	    </div>
	    </div>
	    
	    <div class="form-group">
	        <label for="name" class="col-lg-2 control-label">应用名称</label>
	        <div class="col-lg-10">
	            <input type="text" class="form-control" id="appName" name="name" value="${app.name }" placeholder="应用名称" />
	        </div>
	    </div>
	    
	    <div class="form-group">
	        <label for="description" class="col-lg-2 control-label">应用描述</label>
	        <div class="col-lg-10">
	            <input type="text" class="form-control" id="appDescription" name="description" value="${app.description }" placeholder="应用描述" />
	        </div>
	    </div>
	    
	    <div class="form-group">
	        <div class="col-lg-offset-2 col-lg-10">
	            <a class="btn btn-success" href="javascript:updateApp()" class="btn btn-success" style="float:right"><span id="submintBtn">保存修改</span></a>
	        </div>
	    </div>
	</form>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
/**
 * 保存新应用
 */
function updateApp(){
	var appID = $("#appID").val();
    if(appID=='' || appID==undefined){
    	alert('appID不能为空!')
    	return;
    }
	var appName = $("#appName").val();
    if(appName=='' || appName==undefined){
    	alert('应用名称不能为空!')
    	return;
    }
		var options = { 
		   	url:"<%=basePath %>AppModify", 
		    type:'POST',
		    dataType :'json',
			beforeSend: function(XHR){
			  //showLoading("正在保存,请等待...");
			},
		    success: function(data){
		      if (parent) {
		          parent.closeColorbox(true);
		      }
		    }, //显示操作提示
			error: function(){
			  alert("保存失败,可能appID出现重复");
			  //dismissLoading();
			}
		  }; 
		  $('#form').ajaxSubmit(options);
}	
</script>



你可能感兴趣的:(jsp bootstrap表单页面)