<!DOCTYPE html>
<html>
<head>
<#include "head-file.htm"/>
<link rel="stylesheet" href="{ms:global.host/}/{ms:global.style/}/css/advice.css">
<link rel="stylesheet" href="{ms:global.host/}/{ms:global.style/}/css/imgFileupload.css">
<script type="text/javascript" src="{ms:global.host/}/{ms:global.style/}/js/imgFileupload.js"></script>
<style type="text/css">
.met-show{
padding:0px;
}
</style>
</head>
<body>
<#include "head.htm"/>
<div class="met-column-nav ">
<div class="container">
<div class="card">
<div class="sidebar-tile">
<ul class="met-column-nav-ul invisible-xs">
<li>
<a href="#" title="问题上报" class="link active">问题上报</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="met-show animsition">
<div class="container">
<div class="row">
<div class="clearfix show-editor">
<div class="ms-content-advice">
<div class="ms-content-form-background">
<form class="ms-content-form" method="post" id="postForm">
<!--姓名-->
<label class="form-label">姓名</label>
<input class="ms-content-form-name" type="text" name="name" placeholder="请填写真实姓名">
<!--手机号-->
<label class="form-label">手机号</label>
<input class="ms-content-form-phone" type="text" name="phone" placeholder="请填写手机号">
<!--发生地点-->
<label class="form-label">发生地点</label>
<input class="ms-content-form-place" type="text" name="place" placeholder="请填写详细地点">
<!--问题描述-->
<label class="form-label">问题描述</label>
<textarea class="ms-content-form-message" name="words" placeholder="请填写问题描述"></textarea>
<label class="form-label">图片</label>
<div class="review_img"></div>
<div class="ms-login-button">提交</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<#include "footer.htm"/>
</body>
</html>
<script>
$(function () {
imgFile = new ImgUploadeFiles('.review_img', function (e) {
this.init({
MAX: 4, //Limit the number of images
FileSize: 1024 * 1024 * 4,//单文件限制4MB(注意：单位KB)
callback: function (arr) {
console.log(arr)
}
});
});
});
/* 表单提交 */
var flag = false;
$(".ms-login-button").click(function() {
if(!flag) {
$.ajax({
type: "POST",
url: "{ms:global.host/}/mdiy/post/7df6529f9eaa26da7ae4e01c7f73aa06.do",
data: $("#postForm").serialize(),
success: function(msg) {
flag = true;
alert("提交成功");
location.reload();
}
});
} else {
alert("您已经提交过了！");
}
})
/* 表单验证 */
function verification() {
if($('input[name="name"]').val().length > 0 && $('input[name="phone"]').val().length > 0 && $('.ms-content-form-message').val().length > 0) {
$('.ms-login-button').css("background-color", "#009aff");
$('.ms-login-button').css("pointer-events", 'visible');
$('.ms-login-button').css("color", "#fff");
} else {
$('.ms-login-button').css("background-color", "#fafafa");
$('.ms-login-button').css('pointer-events', "none");
$('.ms-login-button').css("color", "#ddd");
}
}
$('input[name="name"]').keyup(function() {
verification();
})
$('input[name="phone"]').keyup(function() {
verification();
})
$('.ms-content-form-message').keyup(function() {
verification();
})
</script>
