使用layer完成點選彈窗並且提交資料以及日期外掛的使用
阿新 • • 發佈:2019-01-31
function appointmentModal(){
var modal='';
modal+='<p class="subtitle"><i></i>請填寫預約資訊(目前“上門服務功能”暫時只支援廣東省範圍內地區的使用者)</p>';
modal+='<form id="form" action=""><input id="policyId" type="hidden" name="policyId" value="${obj.data.policyId}">' ;
modal+='</form></div>';
layer.open({
type: 1
,title: false //不顯示標題欄
,closeBtn: false
,area: '948px;'
,shade: 0.8
,id: 'LAY_layuipro1' //設定一個id,防止重複彈出
,resize: false
,btn: ['確認提交','取消']
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: modal
,yes: function(index,layero){
//var btn = layero.find('.layui-layer-btn');
//btn.find('.layui-layer-btn0').attr({
//href: '${base}/policy/policylist'
//});
var formData = $("#form").serializeArray();
var contacts=$("#contacts").val();
var contactNumber=$("#contactNumber").val();
var appointmentTime=$("#appointmentTime").val();
var meetingPlace=$("#meetingPlace").val();
if(contacts==""){
layer.msg('姓名不能為空喲!', {time : 1000});
}else if(meetingPlace==""){
layer.msg('上門地址不能為空喲', {time : 1000});
}else{
$.ajax({
url : '${base}/uri',
type : 'post',
data : formData,
success : function() {
layer.msg('預約成功', {time : 800});
window.history.go(0);//成功以後重新整理頁面
},
error : function(result) {
layer.msg('預約失敗', {time : 800});
}
});
}
}
,btn2: function(index, layero){
//這裡是點選取消後的事件
}
});
}
//下面是點選預約按鈕觸發的事件
$("#applyAppointment").click(function() {
appointmentModal();
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii',autoclose:true,minuteStep:30,todayBtn:true});
});
//下面是時間外掛的使用。需要匯入的js和css分別是下面:
<script src="${base}/static/layer/layer.js"></script>
<script src="${base}/static/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="${base}/static/css/bootstrap-datetimepicker.min.css">
modal+='<div class="file-box clearf"><span>上門時間</span>';
modal+='<input id="appointmentTime" name="appointmentTime" size="16" type="text" class="form_datetime"><b><i class="fa fa-calendar" aria-hidden="true"></i></b></div>';