form表单提交后弹框提示

最新推荐文章于 2022-03-09 21:58:24 发布

原创最新推荐文章于 2022-03-09 21:58:24 发布 · 1.5w 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一个基于JSP的发货功能页面实现细节，包括前端表单验证、动态加载地区选择及后端处理逻辑。通过具体代码展示了如何收集表单数据并保存到数据库的过程。

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

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>发货</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<%@ include file="/gzsywl.jsp"%>
<script src="${contextPath }/gzsywl/js/bootstrapValidator_zc.js"></script>

<link rel="stylesheet" href="${contextPath }/gzsywl/zititubiao/demo.css">
<script src="${contextPath }/gzsywl/zititubiao/iconfont.js"></script>

<link rel="stylesheet" href="${contextPath }/gzsywl/css/gzsIndex.css"/>
<script src="${contextPath }/gzsywl/js/gzsmenhu.js"></script>

<link href="${contextPath }/gzsywl/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="/jslib/dist/css/bootstrapValidator.css" />
<script src="${contextPath }/ci/getDic"></script>
<script src="${contextPath }/jslib/dist/js/bootstrapValidator.js"></script>
<script src="${contextPath }/jslib/dist/js/language/zh_CN.js"></script>
<script src="${contextPath }/jslib/time/script/bootstrap-datetimepicker.js"></script>
<script src="${contextPath }/jslib/time/script/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${contextPath }/jslib/js/maintenance/park/datetimepicker.js"></script>

<script src="${contextPath }/jslib/js/portals/consigor/delivery.js"></script>

<script type="text/javascript">
function back() {
location.href="${contextPath }/findTruck/companyList";
}
</script>
<style>
small{
padding-left:0px !important;
}
.form-control-feedback{
top:4px !important;
}
</style>
</head>

<body>
<div class="wyl_xinwen wyl_newList">
<%@include file="/WEB-INF/web/public/footertitle.jsp" %>
<div class="wyl_xinwen_mbx wyl_newList_mbx">
<span href="#">当前位置：</span>
<span>></span>
<span href="#">首页</span>
<span>></span>
<a href="/findTruck/consignor">服务列表</a>
<span>></span>
<span href="#">发货</span>
</div>

<div style="border:1px solid #dcdcdc;margin-bottom:100px;padding-bottom:50px;">

<form id="myForm" action="/findTruck/savePushCargo" method="post">

<div class="wyl_newList_width" style="margin-top:20px;">

<ul class="wyl_newCol_33">
<li>
<p>装货地：</p>
<div class="wyl_work_many form-group">
<select class="wyl_work_manySelect" name="tCargo.province" required id="province"
jtype="000000" jdb="province" jload="jsdict" to="city" jid="${tCargo.province }">
</select>
</div>
</li>
<li>
<p></p>
<div class="wyl_work_many form-group">
<select name="tCargo.city" class="wyl_work_manySelect form-control" id="city"
jtype="" jdb="city" jload="jsdict" to="county" jid="${tCargo.city }" required>
</select>
</div>
</li>
<li>
<p></p>
<div class="wyl_work_many form-group">
<select name="tCargo.county" class="wyl_work_manySelect form-control"id="county"
jtype="" jdb="county" jload="jsdict" jid="${tCargo.county }" required>
</select>
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li style="width:100%;">
<p>装货地详细地址：</p>
<div class="wyl_work_many form-group" style="width:50%;">
<span></span>
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" style="width:100%;" value="${tCargo.addinfo }" name="tCargo.addinfo" type="text" placeholder="请输入详细装货地址" required >
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li>
<p>卸货地：</p>
<div class="wyl_work_many form-group">
<select id="province1" name="tCargo.province1"
jtype="000000" jdb="province" jload="jsdict" to="city1" jid="${tCargo.province1 }" required>
</select>
</div>
</li>
<li>
<p></p>
<div class="wyl_work_many form-group">
<select class="wyl_work_manySelect form-control" id="city1"
jtype="" jdb="city" jload="jsdict" to="county1" name="tCargo.city1" jid="${tCargo.city1 }" required>
</select>
</div>
</li>
<li>
<p></p>
<div class="wyl_work_many form-group">
<select class="wyl_work_manySelect form-control" id="county1"
jtype="" jdb="county" jload="jsdict" name="tCargo.county1" jid="${tCargo.county1 }" required>
</select>
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li style="width:100%;">
<p>卸货地详细地址：</p>
<div class="wyl_work_many form-group" style="width:50%;">
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" style="width:100%;" type="text" name="tCargo.addinfo1" value="${tCargo.addinfo1 }" placeholder="请输入详细卸货地址" required>
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li>
<p>期望车型：</p>
<div class="wyl_work_many form-group">
<select id="type" class="wyl_work_manySelect form-control"jtype="cartype"
name="tCargo.cartype" jdb="sys_dic" jload="jsdict" jid="${tCargo.cartype }" onchange="search();" required>
</select>
</div>
</li>
<li>
<p>车辆长度：</p>
<div class="wyl_work_many form-group">
<select id="long" class="wyl_work_manySelect form-control"jtype="carlong"
name="tCargo.carsize" jdb="sys_dic" jload="jsdict" jid="${tCargo.carsize }" onchange="search();" required>
</select><span style="line-height:40px;">米</span>
</div>
</li>
<li>
<p>货物类型：</p>
<div class="wyl_work_many form-group">
<select name="tCargo.type" class="wyl_work_manySelect form-control" jtype="goodstype"
jdb="sys_dic" jload="jsdict" jid="${tCargo.type }" required>
</select>
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li>
<p>货物名称：</p>
<div class="wyl_work_many form-group">
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" type="text" name="tCargo.name" placeholder="货源名称" value="${tCargo.name }" required/>
</div>
</li>
<li>
<p>货物数量：</p>
<div class="wyl_work_many form-group" style="float:left;clear:none;">
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" type="text" name="tCargo.num" placeholder="货物数量" value="${tCargo.num }" required/>
</div>
<div class="wyl_work_many form-group" style="float:left;clear:none;">
<select name="tCargo.goodsunit" style="width: 70px;"
jtype="goodsweight" jdb="sys_dic" jload="jsdict" jid="${tCargo.goodsunit }" required>
</select>
</div>
</li>
<li>
<p>装货时间：</p>
<div class="form-group" style="margin:0;float:left;width:auto;width:202px;height:42px;">
<div class="input-group date form_date col-md-5" style="width:202px;">
<input class="form-control" id="zhsj" size="16" type="text" name="tCargo.ztime" value="${tCargo.ztime }" readonly style="width:202px;padding:0;height:40px;">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</li>
</ul>
<ul class="wyl_newCol_33">
<li>
<p>发货人姓名：</p>
<div class="wyl_work_many form-group">
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" type="text" name="tCargo.fname" value="${tCargo.fname }" placeholder="发货人姓名" required pattern="^([\w\W]){1,50}$" data-bv-message="字数最多50字" />
</div>
</li>
<li>
<p>手机号：</p>
<div class="wyl_work_many form-group">
<input class="wyl_work_manyInput wyl_work_manyAddress form-control" type="text" name="tCargo.fphone" value="${tCargo.fphone }" placeholder="手机号" required pattern="^1[34578]\d{9}$" data-bv-message="手机号码格式不正确"/>
</div>
</li>
</ul>
</ul>

<div class="wyl_newType">
<p>简介：</p>
<div class="wyl_work_many form-group">
<textarea name="tCargo.content" class="wyl_work_manySpeak" style="margin: 0px 0px 0px 4px; width: 300px; height: 80px;float:none;" required pattern="^([\w\W]){1,300}$" data-bv-message="字数最多300字">${tCargo.content }</textarea>
</div>
</div>

<div class="wyl_newType" style="clear:both;">
<p>请选择物流企业：</p>
<ul id="cbox" class="wyl_newEnterprise">

</ul>
</div>

<div style="width:100%;overflow:hidden;margin-top:20px;">
<div style="width:200px;margin:0px auto;">
<button type="submit" class="wyl_newButton">提交</button>
<button class="wyl_newButton" onclick="back();">返回</button>
</div>
</div>

</div>

</form>

</div>

</div>

<script type="text/javascript">
function checkAll(obj){
$("#cbox input[type='checkbox']").prop('checked',$(obj).prop('checked'));
}
function search(){
type = $("#type").val();
long = $("#long").val();
$.ajax({
url : "/findTruck/findCompany",
data : {
type : type,
long : long
},
async : false,
type : 'post',
success : function(result){
var str = "<input type='checkbox' onclick='checkAll(this);'>全选<br>";
var list = result.obj;
for ( var l in list) {
var re =list[l];
str += "<li><div class='checkbox' style='line-height:26px;'><label><input style='width:20px;height:20px;' type='checkbox' name='ckbox' value="+re.id+">"+"<span style='margin-left:10px;'>"+re.name+"</span></label> </div></li>";
}
$("#cbox").html(str);
}
});
}
</script>

</body>
</html>

后端代码：

public void savePushCargo(){
Json j = new Json();
JmwywUserInfo ji = JmwywUser.getUserInfo(this, 2);
try {
String[] ckbox = this.getParaValues("ckbox");
int i = 0;String ckboxstr ="";
while(i<ckbox.length){
if(i==0){
ckboxstr =ckbox[i];
}else{
ckboxstr +=","+ckbox[i];
}
i++;
}
TCargo cargo = this.getModel(TCargo.class);
cargo.set("pushcids", ckboxstr);
cargo.set("status", 3);
cargo.set("cid", ji.cid);
cargo.set("ctime", new Date());
cargo.set("author", ji.UserId);
ftServer.save(cargo);
cargo.set("guid", System.currentTimeMillis() + cargo.getId());
ftServer.update(cargo);
j.setSuccess(true);
j.setMsg("提交成功");
saveOplog("货源推送历史记录");
} catch (Exception e) {
j.setSuccess(false);
j.setMsg("系统异常");
saveErrlog(e);
}
//this.render("pushCargoLsit.jsp");
this.renderJson(j);
}

弹框的js(delivery.js)代码:

$(function() {
var f = $('#myForm').bootstrapValidator({
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh',
},
fields : {
}
}).on('success.form.bv', function(e) {
e.preventDefault();
submit1("/findTruck/pushCargoList");
//$('#myForm').bootstrapValidator('defaultSubmit');
});

function submit1(url){
$.ajax({
url:$("form").attr("action"),
type:'post',
async : false,
data:$("form").serialize(),
success : function(response){
isJump1(response, url);
}
});
}
function isJump1(response, url){
$("#myModal_MG_XGMM").modal("hide");
if( response.success ){
Modal.alert({
msg : response.msg
}).on(function(e){
console.info(url);
location.href=url;
});
}else{
Modal.alert({
msg : response.msg
});
$("[type='submit']").removeAttr("disabled");
}
}

});