導(dǎo)語：給客戶套模板，我們總不免涉及到各種各樣的表單提交，快速制作表單是套站中必備技能之一了~~~囧

接下來我們將講述利用PHPOK如何快速制作表單

---

第一步，準(zhǔn)備模塊（如已建好，可略過此步驟）

創(chuàng)建模塊（模塊名定為：留言本）用于存儲一些擴展字段，如下圖

填寫模塊名稱，方便管理，如下圖

創(chuàng)建好模塊后，默認是未啟用的，請點擊那個紅色圓標(biāo)，變?yōu)榫G色表示啟用，如下圖

操作完后，還可能還需要創(chuàng)建一些擴展字段，如姓名，聯(lián)系方式，留言內(nèi)容等

請點擊右邊帶鑰匙的圖標(biāo)（如上圖），進去創(chuàng)建相應(yīng)的字段（如下圖）

創(chuàng)建好字段后，效果如下：

在創(chuàng)建字段時，有一個注意事項。即每個創(chuàng)建的字段都要啟用【前端處理】，不然前臺是調(diào)不到的，如下圖

---

第二步，準(zhǔn)備項目，并綁定相應(yīng)的模塊（如已建好，可略過此步驟）

---

第三步，創(chuàng)建表單的數(shù)據(jù)調(diào)用

進入數(shù)據(jù)調(diào)用中心，創(chuàng)建數(shù)據(jù)調(diào)用，如下圖

選擇項目ID：在線留言

填寫調(diào)用標(biāo)識串：message

選擇調(diào)用類型：字段及表單

格式化：啟用

如下圖：

---

第四步，在前臺任意頁面調(diào)用上述步驟創(chuàng)建的信息（注意噢，是任意模板頁上都可以的）

<scripttype="text/javascript">$(document).ready(function(){$("#submit_message").submit(function(){//提交表單//這里填寫客戶端驗證if(!$('#title').val()){alert("留言主題不能為空");returnfalse;}//客戶端驗證結(jié)束，開始執(zhí)行提交$(this).ajaxSubmit({'url':api_url('post','save','id=book'),'type':'post','dataType':'json','success':function(rs){if(rs.status=='ok'){alert('您的留言信息已發(fā)布，請耐心等候管理員審核，感謝您的提交');$.phpok.reload();}else{alert(rs.content);//更新驗證碼$("#update_vcode").phpok_vcode();//清空現(xiàn)有驗證碼$("#_chkcode").val('');returnfalse;}}});returnfalse;});});</script><formmethod="post"id="submit_message"><!--php:$list=phpok('message','in_title=1')--><tablewidth="100%"><!--loopfrom=$listkey=$keyvalue=$value--><tr><tdwidth="150px"align="right">{$value.title}：</td><tdclass="td">{$value.html}</td></tr><!--/loop--><!--if$sys.is_vcode&&function_exists("imagecreate")--><tr><tdalign="right">驗證碼：</td><tdclass="td"><tablecellpadding="0"cellspacing="0"width="180px"><tr><td><inputtype="text"name="_chkcode"id="_chkcode"class="vcode"/></td><tdalign="right"><imgsrc=""border="0"align="absmiddle"id="update_vcode"class="hand"></td></tr></table><scripttype="text/javascript">$(document).ready(function(){$("#update_vcode").phpok_vcode();//更新點擊時操作$("#update_vcode").click(function(){$(this).phpok_vcode();});});</script></td></tr><!--/if--><tr><td></td><td><inputtype="submit"value="提交"class="submit"/></td></tr></table></form>

針對上述代碼，我們可以來分析下：

行數(shù)說明01-32行數(shù)據(jù)提交，其中第12行表示提交的地址，id=book，表示提交到項目標(biāo)識為book這里來33行表單開始，<form 指定一個ID，方便在Ajax中綁定事件，這里用的是submit_message34行
獲取數(shù)據(jù)調(diào)用中心自定義的表單內(nèi)容，其中in_title參數(shù)表示包括標(biāo)題頭36-41行
循環(huán)輸出表單信息42-63行
是否啟用驗證碼功能，使用驗證碼需要同時開啟config_www.php里的驗證碼66行
提交按鈕69行
</form>表單結(jié)束重點提示本次示例使用Ajax提交，使用到了jquery的擴展庫ajaxSubmit，要求您的JS庫中需要包含！
一般不用擔(dān)心，PHPOK使用{url ctrl=js /}就表示已經(jīng)內(nèi)置了。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶參考了本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/2100.html