页面表单提交保存事件
前台页面表单提交保存事件文档
一、前台页面表单提交保存功能主要包括四个步骤:
1、页面代码中引用网站系统基础css和js文件,支持组件呈现效果的/res/c/p.css样式文件,支持组件功能处理的/res/j/p.js。如果页面上需要支持图文并茂发布组件功能,还需要引用/res/c/uploadifive.css样式文件和/res/j/jquery.uploadifive.js脚本文件的支持。
2、通过在页面上组织一个表单,表单中包含多个数据发布型组件、提交按钮。
3、在页面中定义该表单的保存事件信息。
4、在页面中设置保存操作的自定义参数,完成表单数据提交保存的功能。
二、在页面上组织表单操作:
1、定义表单项实例,使用单行文本发布组件设定联系人、手机号的填写项,使用多行文本发布组件设定申请说明的填写项。放置一个提交操作使用的按钮。css样式类名称为actbtn,该按钮的点击事件onclick触发调用保存操作处理sysevent()。
(1).三个表单项定义的实例为:
[sys.text #app_user @联系人 maxlen=20 must=1][/sys.text]
[sys.text #app_tel @手机号 maxlen=11 must=1][/sys.text]
[sys.textbox #app_des @申请说明 {请填写申请使用说明、网站用途等信息,最多500字} maxlen=500 must=1][/sys.textbox]
(2).一个按钮的编写实例为:
<div class="oact"><a href="javascript:void(0);" class="actbtn" onclick="sysevent();">提交申请</a></div>
(3).核心项,引擎要求表单提交事件中必须放置的4个隐藏域项:
<input type="hidden" id="k0" value="[k0]" />
<input type="hidden" id="k1" value="[k1]" />
<input type="hidden" id="k2" value="[k2]" />
<input type="hidden" id="k3" value="[k3]" />
(4).一个完整的组织表单操作实例写法:
<div class="app-con">
[sys.text #app_user @联系人 maxlen=20 must=1][/sys.text]
[sys.text #app_tel @手机号 maxlen=11 must=1][/sys.text]
[sys.textbox #app_des @申请说明 {请填写申请使用说明、网站用途等信息,最多500字} maxlen=500 must=1][/sys.textbox]
<div class="oact"><a href="javascript:void(0);" class="actbtn" onclick="sysevent();">提交申请</a></div>
<input type="hidden" id="k0" value="[k0]" />
<input type="hidden" id="k1" value="[k1]" />
<input type="hidden" id="k2" value="[k2]" />
<input type="hidden" id="k3" value="[k3]" />
</div>
(5).前台页面呈现的效果图:
三、在页面中定义表单提交保存事件信息:
1、前台页面操作功能事件讲解:
(1).定义表单提交保存事件区域:[event=自定义事件的名称,本页面中不可重复]....[/event]。事件的名称只支持英文字母、数字、下划线。
(2).定义表单提交保存事件的执行区域:[action=保存数据的数据表名称=执行方式add或update]..区域内定义需要操作的数据字段信息....h]/action]。数据表名称只支持英文字母、数字、下划线。执行方式可选择一种,add表示添加新数据,update表示修改更新数据。此处表单为add方式。
(2.1).事件的执行区域[action...]...[/action]内,可定义一个[dbn=对接名称],用于当需要在本站中扩展处理其他MS SQL Server数据库的数据时,可定义非本站的数据库链接的对接名称。不需要时,此部分可去掉。具体操作详情,请参考【单条或多条数据查询组件文档】中的[dbn=...]定义部分。
(2.2).事件的执行区域[action...]...[/action]内,定义需要操作的数据字段信息,使用[cols]....[/cols]界定字段信息区域。
其中每个字段的信息定义,请用[col=字段名]....[/col];
字段信息定义中可以使用[must]定义必填的提示信息[/must]设定为必填项,如果不需要必填,去掉must项即可。
提交的数据接收,请使用字段信息定义中的[val]$e.表单项的id属性值$[/val],表单项的id属性值,也就是具体某一个发布型组件的id信息,将通过该id获取用户填写提交的内容,比如:$e.app_user$表示获取用户提交的联系人。
(3).一个完整的表单提交事件定义实例:实例事件名称定义为appdemodo,事件执行操作的数据表为user_demo_app_list,操作的方式为add添加数据,操作的字段信息有联系人ud_fullname,手机号ud_tel,申请说明ud_des,这些数据表字段对应保存的数据来自用户表单提交的各对应填写项内容(用$e.表单元素项id$方式获取其内容)。
[event=appdemodo]
[action=user_demo_app_list=add]
[cols]
[col=ud_fullname][must]请填写联系人[/must][val]$e.app_user$[/val][/col]
[col=ud_tel][must]请填写手机号[/must][val]$e.app_tel$[/val][/col]
[col=ud_des][must]请填写申请说明[/must][val]$e.app_des$[/val][/col]
[/cols]
[/action]
[/event]
四、在页面中设置保存操作的自定义参数,完成表单数据提交保存的功能:
1、在表单区域中放置了一个提交按钮:
<div class="oact"><a href="javascript:void(0);" class="actbtn" onclick="sysevent();">提交申请</a></div>
该按钮的点击操作使用javascript保存功能的sysevent()。其中,nullmsg 用于接收表单项中各个发布型组件的内容验证处理,vals 用于处理用户填写的内容组织。最后提交到网站处理保存数据完成。这些操作和写法都是系统已内置的,用户只需复制使用即可。
2、提交按钮的保存操作,用户使用时只需要自己修改的3个地方:
a.需要注意将执行的事件名称设置为自己定义的,本实例为appdemodo。已用红色标出。
b.需要将提交按钮的css样式类名称设置为自己定义的,本实例为actbtn。已用红色标出。
c.提交完成后的提示信息设置为自己定义的,本实例为“提交成功!我们将尽快安排处理。”。已用红色标出。
function sysevent() {
var nullmsg = alertnullsyselecons();
if (nullmsg != "") {
pageAlert(nullmsg, 0, 1500);
return false;
}
var vals = getsyselecons();
addorupdate(
function(data){
$(".loader").addClass("domsg").html("提交成功!我们将尽快安排处理。");
},"appdemodo",vals,"actbtn",true
);
}
五、前台页面表单提交保存事件的功能效果:
六、完整的一个表单提交保存事件的实例写法:
<div class="app-con">
[sys.text #app_user @联系人 maxlen=20 must=1][/sys.text]
[sys.text #app_tel @手机号 maxlen=11 must=1][/sys.text]
[sys.textbox #app_des @申请说明 {请填写申请使用说明、网站用途等信息,最多500字} maxlen=500 must=1][/sys.textbox]
<div class="oact"><a href="javascript:void(0);" class="actbtn" onclick="sysevent();">提交申请</a></div>
<input type="hidden" id="k0" value="[k0]" />
<input type="hidden" id="k1" value="[k1]" />
<input type="hidden" id="k2" value="[k2]" />
<input type="hidden" id="k3" value="[k3]" />
</div>
[event=appdemodo]
[action=user_demo_app_list=add]
[cols]
[col=ud_fullname][must]请填写联系人[/must][val]$e.app_user$[/val][/col]
[col=ud_tel][must]请填写手机号[/must][val]$e.app_tel$[/val][/col]
[col=ud_des][must]请填写申请说明[/must][val]$e.app_des$[/val][/col]
[/cols]
[/action]
[/event]
<script type="text/javascript">
function sysevent() {
var nullmsg = alertnullsyselecons();
if (nullmsg != "") {
pageAlert(nullmsg, 0, 1500);
return false;
}
var vals = getsyselecons();
addorupdate(
function(data){
$(".loader").addClass("domsg").html("提交成功!我们将尽快安排处理。");
},"appdemodo",vals,"actbtn",true
);
}
</script>
七、更多页面表单提交保存事件的用法实战操作,请下载名扬银河数字官网系统后获得更好的实践代码与文档的查阅体验,下载网站系统请【名扬银行数字官网系统的最新版本】