

<div class="container" style="margin:30px auto;">
    <div class="form-horizontal" role="form"  >
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
            <div class="col-sm-10">
                <input id="nickname" type="text" class="form-control" placeholder="请认真填写您的称呼">
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
                <input id="email" type="email" class="form-control" placeholder="亲，邮箱可以帮助我们反馈你的建议！嘿嘿！">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">内容</label>
            <div class="col-sm-10">
                <textarea id="content" class="form-control" rows="5" placeholder="可要认真填写您的疑问或者建议哦，需"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-8">
                <input id="SecurityCode" type="text" class="form-control" placeholder="验证码是必须的！">
            </div>
            <div class="col-sm-2">
                <img src="/SecurityCode" alt="mrcms 验证码"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" onclick="submit()" data-toggle="modal" data-loading-text="正在加载..." data-target="#myModal" class="btn green_btn">提交留言</button>
            </div>
        </div>
    </div>

</div>

<!--#include file="common/footer.html"-->
<!-- 提交消息 Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">消息信息</h4>
            </div>
            <div id="message" class="modal-body">
                亲，数据提交失败！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function submit(){
        var params = "authcode="+$("#SecurityCode").val()+"&nickname="+$("#nickname").val()+"&content="+$("#content").val()+"&email="+$("#email").val();
        $.ajax({
            url: "plugin/guestbook/add",
            type: "POST",
            data: params,
            dataType:"JSON",
            success: function(data){
                $("#message").html(data.message);
                if(data.status){//留言成功，就重置
                    reset();
                }
            }
        });
    }
    // 重置
    function reset(){
        $("#SecurityCode").val("");
        $("#nickname").val("");
        $("#content").val("");
        $("#email").val("");
    }

</script>