pbootcms中关于自定义表单的自定义字段使用

我们平时在使用pbootcms程序建站时，经常会用到自定义表单的自定义字段功能，最新版的程序已可以支持全站全模板自定义调取使用了，非常的强大和方便，下面就说说具体的使用方法！

无论是自己新建模板还是直接使用默认的留言板模板都可以实现，直接在后台加入自己的字段，前台添加自定义标签即可。

例如：我们直接在后台留言字段新加了QQ（文本类型），联系地址（文本类型），性别（单选类型），爱好（多选类型），预算（下拉菜单类型）等字段。

加好之后，直接在前台模板页面开始添加自定义标签字段，页面的样式标签很灵活，根据自己的项目需要添加即可。

<!-- 自定义表单字段 -->
                <div class="form-group">
                    <label for="sex">性  别</label>
                    <div>
                        <input type="radio" name="sex" id="sex1" value="男">男
                        <input type="radio" name="sex" id="sex2" value="女">女
                    </div>
                </div>
                <div class="form-group">
                    <label for="aihao">爱  好</label>
                    <div>
                        <input type="checkbox" name="aihao" id="aihao1" value="唱歌">唱歌
                        <input type="checkbox" name="aihao" id="aihao2" value="跳舞">跳舞
                        <input type="checkbox" name="aihao" id="aihao3" value="上网">上网
                        <input type="checkbox" name="aihao" id="aihao4" value="看书">看书
                        <input type="checkbox" name="aihao" id="aihao5" value="游泳">游泳
                    </div>
                </div>
                <div class="form-group">
                    <label for="yusuan">预  算</label>
                    <div>
                        <select name="yusuan">
                            <option value="500元以内">500元以内</option>
                            <option value="500元-1000元">500元-1000元</option>
                            <option value="1000元-3000元">1000元-3000元</option>
                            <option value="3000元-5000元">3000元-5000元</option>
                            <option value="5000元-8000元">5000元-8000元</option>
                            <option value="10000元以上">10000元以上</option>
                        </select>
                    </div>
                </div>
                <!-- /自定义表单字段 -->
                <div class="form-group">
                    <label for="qq">QQ号码</label>
                    <div>
                        <input type="text" name="qq" required id="qq" class="form-control" placeholder="请输入QQ号码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="dizhi">联系地址</label>
                    <div>
                        <input type="text" name="dizhi" required id="dizhi" class="form-control" placeholder="请输入联系地址">
                    </div>
                </div>

然后添加js部分代码，图中红色部分所标字段：

var qq=$(obj).find("#qq").val();
var dizhi=$(obj).find("#dizhi").val();
  
var sex = $('input[name="sex"]').filter(':checked').val();
var aihao = [];
  $("input:checkbox[name='aihao']:checked").each(function() {
        aihao.push($(this).val());
    });
var yusuan=$(obj).find("select[name='yusuan']").val();


data: {
    	contacts: contacts,
    	mobile: mobile,
        qq: qq,
        dizhi: dizhi,
    	content: content,
    	checkcode: checkcode,
        sex: sex,
        aihao:aihao,
        yusuan:yusuan
    },

这样就已经全部完成了，清除下后台缓存，然后去前台看下页面，并添加数据看一看。

新加的字段都能正常显示，我们再添加一条数据测一测。

后台的数据也都正常显示，至此，自定义字段已经全部添加完毕，自己可以根据项目需求灵活定制！有帮助到大家的话，多多转发一下，非常感谢！

冲浪者科技专注品牌网站建设，高端网站定制， 网站制作， 定制网站开发，网站改版升级，外贸网站建设，政府网站建设， 网站ipv6升级改造，网站SEO优化推广，小程序制作开发，400电话，企业邮箱，SSL证书安装等为一体的互联网整合营销一站式服务商。 咨询服务热线：173-7784-9589（微信同号）