2021-08-03 16:45:12
220
今天给一个客户网站增加一个功能,即:自定义表单添加一个类似注册会员时的一个协议,提交表单前必须勾选否则不会通过,客户网站用的时phpcms内核,后台已经建立好表单,根据需求,我们就直接修改相关模板页代码就可以。
一、修改前端
因为网站前端用的时bootstrap框架,所以直接在相应位置插入框架给的代码
<div class="checkbox"> <label> <input type="checkbox" id="protocol" value="1" checked=""> <a href="javascript:void(0);" onclick="show_protocol();" class="blue">点击阅读协议</a> </label> </div>
下面的a标签是为了点击弹出协议内容
//将这段代码放到最下面就可以
<div id="show_protocol" style="display: none;">
{pc:get sql="SELECT * FROM pc_news_data WHERE id='68'" cache="3600" return="data"}
{loop $data $val}
{$val[content]}
{/loop}
{/pc}
</div>这里是弹出层要显示的协议内容,因为phpcms后台除了注册会员哪里有个协议,并没有可以让我们单独定义其他协议的地方,所以这里我将协议内容事先发布在某一个文章栏目里了,使用pc:get 标签调取这篇文章的id。
// 点击显示
function show_protocol(){
layer.open({
skin: 'demo-class',
type: 1,
title: ['申请须知', 'font-size: 18px;'],
content: $("#show_protocol"), //弹出层要显示的dom,绑定好
shade: 0.3,
shadeClose: true,
btn: ['同意','不同意'],
success: function(layero, index){
$("#protocol").prop("checked", false);
},
yes: function(index, layero){
$("#protocol").prop("checked", true);
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
// time: 10000
});
}这里是点击阅读协议后弹出的js代码,我们这里是通过layer插件实现的弹出,所以先要引入layer.js文件,这里就不演示了。
<form method="post" action="" name="myform" id="myform" onsubmit="return check();">
onsubmit="" 这个是手动验证
function check()
{
var name =$("#name").val();
var protocol = $("#protocol:checked").val();//获取当前这个单选的值 1或者undefined
if(name=="")
{
alert("姓名必须填写");
name.focus();
return false;
}
// 这里面可以根据你的表单自己写验证规则
if (protocol == undefined) {
layer.msg('请勾选申请须知', {time:1500}, function(){
show_protocol() //如果没勾选就执行弹出层!
})
return false;
}
}到现在基本上 整个流程就已经完成了,为了不影响原来表单的提交,这里的checkbox并没有给他name值,只起到验证的作用。
二、提交表单成功后,"感谢您的参与!" 的修改
当时客户提出修改这个时候,想着没那么难,可是找到这个找了好半天,phpmcs/modules/formguide/index.php 百度上的结果都说在这里,但是找了半天也没看到半个中文。后来发现phpcms所有的提示信息都用了showmassage(L('')) 这个函数,然后又发现phpcms目录下有个languages,这是支持双语或者多语的,那提示的信息,肯定要准备两套或者多套的,那就翻一翻这个languages目录吧,果不其然在phpcms/languages/zh-en/目录下发现formguide.lang.php 这个文件,拉到最下面就看到了 "感谢您的参与!" 直接将这个文字修改成你想要显示的文字就可以了,详细看下这个文件基本上定义了所有的提示信息的内容都可以在这里修改成你喜欢的提示信息。
好了今天就分享到这里!!