表单制作

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

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

第一步，准备模块（如已建好，可略过此步骤）

创建模块（模块名定为：留言本）用于存储一些扩展字段，如下图

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

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

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

请点击右边带钥匙的图标（如上图），进去创建相应的字段（如下图）

创建好字段后，效果如下：

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

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

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

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

选择项目ID：在线留言

填写调用标识串：message

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

格式化：启用

如下图：

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

<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 /}就表示已经内置了。