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留言板的朋友很有幫助。