HTML网页万能表单分享

万能表单跟留言模块(message)是相关联的,下面我就来详细介绍如何使用万能表单功能  留言表单

<form action="{fun U('message/index')}" onsubmit="return checkform()" method="POST">
    <input name="tid" type="hidden" value="{$type['id']}" >
    <div class="form-group"><label>*您的称呼</label><input name="user" id="user" class="form-control" type="text"></div>
    <div class="form-group"><label>*您咨询的问题</label><input name="title" id="title" class="form-control" type="text"></div>
    <div class="form-group"><label>*您的手机号</label><input name="tel" id="tel" class="form-control" type="tel"></div>

<!--后台新增的扩展字段在这里输出-->
    <span id="ext_fields"></span>

    <div class="form-group"><label>*问题描述</label><textarea name="body" id="body" class="form-control"></textarea></div>
    <div class="form-group"><button class="btn btn-primary btn-block" type="submit">确定发送</button></div>
</form>

    function checkform(){
        var user = $.trim($("#user").val());
        var title = $.trim($("#title").val());
        var email = $.trim($("#email").val());
        var tel = $.trim($("#tel").val());
        var body = $.trim($("#body").val());
        if(user==''){
            alert('您的称呼不能为空~');$("#user").focus();return false;
        }
        if(title==''){
            alert('您的咨询的问题不能为空~');$("#title").focus();return false;
        }
        if(tel==''){
            alert('您的手机号不能为空~');$("#tel").focus();return false;
        }
        if(body==''){
            alert('问题描述不能为空~');$("#body").focus();return false;
        }
        return true;
    }
    function get_fields(tid,id){
        var id = arguments[1]?arguments[1]:0;
        $.post("{fun U('Common/get_fields')}",{molds:'message',tid:tid,id:id},function(r){
            var res = JSON.parse(r);
            console.log(res);
            if(res.code==0){
                //默认 res.tpl输出的是layui的模板HTML,可以审核元素查看res里面的内容
                //$("#ext_fields").html(res.tpl); 
                var html = '';
                var len = res.fields_list.length;
                if(len>0){
                    //根据对应的字段，进行HTML设计
                    for(var i=0;i<len;i++){
                        if(res.fields_list[i].field=='email'){
                            html+='<div class="form-group"><label>您的邮箱</label><input name="email" id="email" class="form-control" type="email"></div>';
                        }
                    }

                }
                $("#ext_fields").html(html);
            }

        });
    }
    $(document).ready(function(){
         get_fields({$type['id']});
    });

$.post()方法返回的res.tpl就携带了已经格式化的HTML内容，但是这个HTML是基于layui的，所以如果你要使用官方已经给你格式化的HTML，你需要借助layui，当然也可以自己自定义每个字段的输出HTML格式，也可以自己定制一套输出HTML的格式，这需要写个插件方法，覆盖（或者hook）掉Home/CommonController.php 控制器下面的 get_fields这个方法