作者:冲浪者科技 | 2023-11-02 | 热度:1506 | 栏目:常见问题 | 收录:
我们平时在使用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(微信同号)