表单制作

标签: 制作表单

导语:给客户套模板,我们总不免涉及到各种各样的表单提交,快速制作表单是套站中必备技能之一了~~~囧

接下来我们将讲述利用PHPOK如何快速制作表单


第一步,准备模块(如已建好,可略过此步骤)

创建模块(模块名定为:留言本)用于存储一些扩展字段,如下图

blob

填写模块名称,方便管理,如下图

blob

创建好模块后,默认是未启用的,请点击那个红色圆标,变为绿色表示启用,如下图

blob

操作完后,还可能还需要创建一些扩展字段,如姓名,联系方式,留言内容等

请点击右边带钥匙的图标(如上图),进去创建相应的字段(如下图)

blob

创建好字段后,效果如下:

blob

在创建字段时,有一个注意事项。即每个创建的字段都要启用【前端处理】,不然前台是调不到的,如下图

blob


第二步,准备项目,并绑定相应的模块(如已建好,可略过此步骤)

01


第三步,创建表单的数据调用

进入数据调用中心,创建数据调用,如下图

blob

选择项目ID:在线留言

填写调用标识串:message

选择调用类型:字段及表单

格式化:启用

如下图:

blob


第四步,在前台任意页面调用上述步骤创建的信息(注意噢,是任意模板页上都可以的)

<script type="text/javascript">
$(document).ready(function(){
	$("#submit_message").submit(function(){
		//提交表单
		//这里填写客户端验证
		if(!$('#title').val()){
			alert("留言主题不能为空");
			return false;
		}
		//客户端验证结束,开始执行提交
		$(this).ajaxSubmit({
			'url':api_url('post','save','id=book'),
			'type':'post',
			'dataType':'json',
			'success':function(rs){
				if(rs.status == 'ok'){
					alert('您的留言信息已发布,请耐心等候管理员审核,感谢您的提交');
					$.phpok.reload();
				}else{
					alert(rs.content);
					//更新验证码
					$("#update_vcode").phpok_vcode();
					//清空现有验证码
					$("#_chkcode").val('');
					return false;
				}
			}
		});
		return false;
	});
});
</script>
<form method="post" id="submit_message">
<!-- php:$list = phpok('message','in_title=1') -->
<table width="100%">
<!-- loop from=$list key=$key value=$value -->
<tr>
	<td width="150px" align="right">{$value.title}:</td>
	<td class="td">{$value.html}</td>
</tr>
<!-- /loop -->
<!-- if $sys.is_vcode && function_exists("imagecreate") -->
<tr>
	<td align="right">验证码:</td>
	<td class="td">
		<table cellpadding="0" cellspacing="0" width="180px">
		<tr>
			<td><input type="text" name="_chkcode" id="_chkcode" class="vcode" /></td>
			<td align="right"><img src="" border="0" align="absmiddle" id="update_vcode" class="hand"></td>
		</tr>
		</table>
		<script type="text/javascript">
		$(document).ready(function(){
			$("#update_vcode").phpok_vcode();
			//更新点击时操作
			$("#update_vcode").click(function(){
				$(this).phpok_vcode();
			});
		});
		</script>
	</td>
</tr>
<!-- /if -->
<tr>
	<td>&nbsp;</td>
	<td><input type="submit" value=" 提交 " class="submit" /></td>
</tr>
</table>
</form>

针对上述代码,我们可以来分析下:

行数说明
01-32行数据提交,其中第12行表示提交的地址,id=book,表示提交到项目标识为book这里来
33行表单开始,<form 指定一个ID,方便在Ajax中绑定事件,这里用的是submit_message
34行
获取数据调用中心自定义的表单内容,其中in_title参数表示包括标题头
36-41行
循环输出表单信息
42-63行
是否启用验证码功能,使用验证码需要同时开启config_www.php里的验证码
66行
提交按钮
69行
</form>表单结束
重点提示
本次示例使用Ajax提交,使用到了jquery的扩展库ajaxSubmit,要求您的JS库中需要包含!
一般不用担心,PHPOK使用{url ctrl=js /}就表示已经内置了。


评论反馈