dedecms模板留言板js拓展开发

dedecms模板留言板js拓展开发

官方的dedecms留言板模板可以接受的留言信息比较少,只有昵称、emai、QQ、留言内容等少数几个字段。

怎样实现dedecms留言板功能的扩展。增加留言字段呢？

这里介绍的方式，采用js方式，轻松的实现了留言字段的扩展。

这里提供一个相对完整的dedecms留言板表单。

<form action=”/plus/guestbook.php” onSubmit=”return check_mess_info()” name=”form1″ id=”messform” method=”post”>
<input type=’hidden’ name=’action’ value=’save’ />
<!–mess_main–>
<div id=”mess_main”>
<div class=”mess_list”>
<div class=”mess_title”>正文</div><div class=”mess_textarea”><textarea name=”msg” id=”mess_message_” rows=”6″ cols=”36″ value=”></textarea></div>
</div>
<table border=0 align=center cellpadding=10 cellspacing=0 width=98% class=”form” style=” margin:0 auto “>
<tbody>
<tr><td width=20%>单位名称</td><td><input id=’uname’ type=’text’ size=’80’ name=’uname’ value='<?php echo $g_name; ?>’ />*</td></tr>
<tr><td width=20%>地址</td><td><input id=’f2′ type=’text’ name=’f2′ size=’80’ value=”/></td></tr>
<tr><td width=20%>公司地址</td><td><input id=’f3′ type=’text’ name=’f3′ size=’80’ value=”/></td></tr>
<tr><td width=20%>邮政编码</td><td><input id=’f4′ type=’text’ name=’f4′ size=’80’ value=”/></td></tr>
<tr><td width=20%>E-mail</td><td><input id=’f5′ type=’text’ name=’f5′ size=’80’ value=”/></td></tr>
<tr><td width=20%>电话</td><td><input id=’f6′ type=’text’ name=’f6′ size=’80’ value=”/></td></tr>
<tr><td width=20%>传真</td><td><input id=’f7′ type=’text’ name=’f7′ size=’80’ value=”/></td></tr>
<tr><td width=20%>联系人</td><td><input id=’f8′ type=’text’ name=’f8′ size=’80’ value=”/></td></tr>
<tr><td width=20%>职务</td><td><input id=’f9′ type=’text’ name=’f9′ size=’80’ value=”/></td></tr>
<tr><td width=20%>展品名称（中文）</td><td><input id=’f10′ type=’text’ name=’f10′ size=’80’ value=”/></td></tr>
<tr><td colspan=”2″><strong>展品范围</strong></td></tr>
<tr><td colspan=”2″><table cellspacing=”0″>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’数控机床与金属加工展’ /> 数控机床与金属加工展<div style=”display:none”>展品大类：金属切削机床、金属成形机床、特种加工机床、数控系统、数显装置和机床电器、机床零部件及辅助设备、磨料磨具、刀具、工夹具及相关产品、检验和测量设备</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’工业自动化展’ /> 工业自动化展<div style=”display:none”>展品大类：生产自动化、过程自动化、机器人技术、电气系统、工业自动化信息技术及软件、微系统技术</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’环保技术与设备展’ /> 环保技术与设备展<div style=”display:none”>展品大类：废弃物处理和回收利用技术与设备、水处理技术与设备、循环经济及资源综合利用、交通节能技术与设备、新能源技术与设备、建筑节能</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’信息与通信技术应用展’ /> 信息与通信技术应用展（城市LED照明与新型显示展）<div style=”display:none”>展品大类：通信及网络产品、集成电路及电子元器件、计算机软硬件及推广应用、信息安全、电源及相关产品、显示及视听产品、半导体照明</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’新能源与电力电工展’ /> 新能源与电力电工展<div style=”display:none”>展品大类：新能源技术及设备、发电设备、电力电工技术、电力测控仪器、电气自动化技术与设备、输电、配电设备及附件</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’科技创新展’ /> 科技创新展<div style=”display:none”>展品大类：设企业与科、教等系统两个板块、主要展出企业、科研机构和大专院校的科技创新成果</div></td>
</tr>
<tr>
<td><input type=’checkbox’ name=’f11′ value=’新能源汽车展’ /> 新能源汽车展<div style=”display:none”>展品大类：交易、展示 混合动力汽车、电动汽车、燃料电池汽车等新能源汽车、驱动系统、充电设施、相关零部件、汽车设计</div></td>
</tr>
<tr>
<td colspan=”3″><input type=’checkbox’ name=’f11′ value=’航空航天技术展（航空航天技术展为双年展，逢单年举办）’ /> 航空航天技术展（航空航天技术展为双年展，逢单年举办）</td>
</tr>
</table></td></tr>
<tr>
<td colspan=”2″><strong>公司性质</strong></td>
</tr>
<tr><td colspan=”2″><table cellspacing=”0″>
<tr>
<td><input name=’f12′ type=’radio’ value=’国营企业’ checked=”checked” /> 国营企业</td>
<td><input name=’f12′ type=’radio’ value=’民营企业’ /> 民营企业 </td>
<td><input name=’f12′ type=’radio’ value=’中外合资/合作企业’ /> 中外合资/合作企业</td>
<td><input name=’f12′ type=’radio’ value=’代理国际品牌的内资企业’ /> 代理国际品牌的内资企业</td>
</tr>
<tr>
<td><input name=’f12′ type=’radio’ value=’港澳台企业’ /> 港澳台企业</td>
<td><input name=’f12′ type=’radio’ value=’外商独资企业’ /> 外商独资企业</td>
<td><input name=’f12′ type=’radio’ value=’境外企业’ /> 境外企业</td>
<td><input name=’f12′ type=’radio’ value=’境外企业国内办事处’ /> 境外企业国内办事处</td>
</tr>
</table></td></tr>
<tr><td colspan=”2″><strong>预定展位</strong></td></tr>
<tr><td colspan=”2″>A.标准展位 9平方米（3米×3米）标准展台<input id=’f13′ type=’text’ name=’f13′ size=’5′ value=”/>
个</td></tr>
<tr><td colspan=”2″>B.室内光地（18平方米起租）长
<input type=’text’ id=’f14′ name=’f14′ size=’5′ value=”/>
米 × 宽
<input type=’text’ name=’f15′ id=’f15′ size=’5′ value=”/>
米</td></tr>
<tr><td colspan=”2″>C.室外光地（50平方米起租）
<input type=’text’ name=’f16′ id=’f16′ size=’5′ value=”/>
平方米</td></tr>
<tr>
<td colspan=”2″ align=”center”>
<div class=”mess_list”>
<div class=”mess_title” style=” height:30px; line-height:30px;”>安全问题</div><div class=”mess_input”><img style=”position:relative;top:3px;margin-right:4px;” id=”login_captcha” src=”../include/vdimgck.php” class=”captchaimg” border=”0″ />
<input type=”text” name=”validate” id=”mess_rand_rs_” value=”” style=”width:52px;” />*</div>
</div>

<input style=”border:none ” name=”Submit” type=”submit” class=”subd” value=”提交” />

</td>
</tr>
</tbody>
</form>
</table>

<div class=”message_bg”></div>
</div>
<!–mess_main end–>
<div class=”list_bot”></div>
</div>

</form>

表单中可以提交的信息非常多，如果都做成字段，需要修改数据库字段，费时费力。

使用js方式就非常方便了。

关键的来了。下面是实现表单提交的js代码：

<script type=”text/javascript” language=”javascript”>
<!–
function check_mess_info(thisForm)
{
var str=””;
str=str+”单位名称:”+document.getElementById(“uname”).value+”\n”;
str=str+”地址:”+document.getElementById(“f2″).value+”\n”;
str=str+”公司地址:”+document.getElementById(“f3″).value+”\n”;
str=str+”邮政编码:”+document.getElementById(“f4″).value+”\n”;
str=str+”E-Mail:”+document.getElementById(“f5″).value+”\n”;
str=str+”电话:”+document.getElementById(“f6″).value+”\n”;
str=str+”传真:”+document.getElementById(“f7″).value+”\n”;
str=str+”联系人:”+document.getElementById(“f8″).value+”\n”;
str=str+”职务:”+document.getElementById(“f9″).value+”\n”;
str=str+”展品名称（中文）:”+document.getElementById(“f10″).value+”\n”;
str=str+”展品范围:”+checkall()+”\n”;
str=str+”公司性质:”+chk()+”\n”;
str=str+”预定展位:”+”\n”;
str=str+”A.标准展位 9平方米（3米×3米）标准展台:”+document.getElementById(“f13″).value+”个”+”\n”;

str=str+”B.室内光地（18平方米起租）长:”+document.getElementById(“f14”).value+”米*”+”宽:”+document.getElementById(“f15″).value+”米”+”\n”;

str=str+”C.室外光地（50平方米起租）:”+document.getElementById(“f16″).value+”\n”;

document.getElementById(“mess_message_”).value = str;

}

function checkall()
{
var str=””;
var c=document.getElementsByName(“f11″);
for(var i=0;i <c.length;i++)
{
if(c[i].checked==true)
{
str=str+c[i].value+” | “;
}
}
return str;
}
function chk(){
var obj = document.getElementsByName(‘f12’);
for (i=0;i<obj.length;i++){
if (obj[i].checked){
var str=obj[i].value;
}
}
return str;
}

–>
</script>
代码比较多，时间关系，没有精简代码。

对于要扩展dedecms留言板的朋友很有帮助。