Formset表单设置函数库
一、从基本说起
B/S开发,最基础的人机交互是什么?数据来自哪里?(产生的和输入的[废话...此处省略N万字....])。是表单。常规的软件都必不可少的过程是 用户输入--》处理--》存储--》读取修改。数据存在数据库里木用,要动起来,就要交互。于是..........
二、过程
1.用户输入
通过以下几种表单元素,展示给用户,通过输入、点击、拖曳等形式操作,然后获取用户的动作。
文本框、多行文本域、下拉菜单、单选按钮、复选按钮、隐藏域。
2.处理存储
3.读取修改
把现有的数据读出来,再以表单形式展示。恰恰是这一步,让程序员头疼,明明和添加过程相似,还要机械性的写一遍,简直是浪费人力。根据不同的表单元素,还要损耗脑细胞啊。
文本框:以 value = 形式设值
多行文本:在textarea之间输出值
下拉菜单:这个怎么办?获取值,用编程判断选项的值,在值符合的一项,多输出一个selected,要重新输出一次菜单。
单选按钮:这个呢?判断符合的值,输出checked。
复选按钮:判断是否空值,然后决定是否checked。
要调用页面元素:document.getElementById ,汗偶英文不好,总记不住这长的一串单词。。。。
还有些元素属性的设置,元素的隐藏与显示。。。。。。
明明是很简单的问题,非要用编程实现,有时间容许这样挥霍么?
三、解决方法
现在你不必要编程来解决很白痴又浪费时间的问题了,之需要引用一个js,读取值输出就可了。
Formset.js
CODE:[Copy to clipboard]var Radiov = 'null';
var Rarray = 'null';
var EType;
//DreamEcm Formset
//Date: Jul 13, 2006
//Copyright: DreamSoft Co.,Ltd.
//Mail:
[email protected] //Author: Egmax
/***
Input('Element_id','value');
***/
function Input(Eid, v)
{
$(Eid).value = v;
}
/***
Select('Element_id','value');
***/
function Select(Eid,v)
{
var _obj = $(Eid);
for(var i=0; i<_obj.options.length; i )
if(_obj.options.value == v) { _obj.selectedIndex = i; break; }
}
/***
Checkbox('Element_id','value');
***/
function Checkbox(Eid,v)
{
if(v != 0) $(Eid).click();
}
/***
Radio('Element_name', 'value');
***/
function Radio(Ename, Evalue)
{
if(typeof(Radiov) == 'string') Rarray = _GetRadio();
if(typeof(Rarray) == 'string') return false;
for (var i=0; i<Rarray.length; i ){
if (Rarray.name == Ename && Rarray.value == Evalue) { Rarray.click(); break; }
}
}
/***
Set(Fid, v);
***/
function Set(Fid, v)
{
EType = $(Fid).type;
switch(EType) {
case 'text' : Input(Fid, v); break;
case 'select-one' : Select(Fid, v); break;
case 'checkbox' : Checkbox(Fid, v); break;
case 'hidden' : Input(Fid, v); break;
case 'radio' : Radio(Fid, v); break;
case 'textarea' : Input(Fid, v); break;
default : return false;
}
}
/***
$('Element_id','Element_id',..........);
return : obj array
***/
function Submit(Fname)
{
document.forms[Fname].submit();
}
/***
Dis('Element_id','Element_id',..........);
***/
function Dis(Eid)
{
if(arguments.length == 1) { $(Eid).disabled = true; return; }
var i;
for (i=0; i<arguments.length; i )
if(typeof(arguments) == 'string') $(arguments).disabled = true;
}
/***
$('Element_id','Element_id',..........);
return : obj array
***/
function $(EId)
{
if(arguments.length == 1) return document.getElementById(EId);
var i,Es = new Array();
for (i=0; i<arguments.length; i )
if(typeof(arguments) == 'string') Es.push(document.getElementById(arguments));
return Es;
}
/***
_GetRadio();
return : obj array
***/
function _GetRadio()
{
var _input = document.getElementsByTagName('input');
if(_input.length < 1) return 'null';
var i,Is = new Array();
for (i=0; i<_input.length; i ) if(_input.type=="radio") Is.push(_input);
Radiov = Is;
return Is;
}
示例:
CODE:[Copy to clipboard]<script src=../../'Formset.js'></script>
Input演示:<input id='t_input' name='test'>
<br>Input('t_input','123456');
<br><br>
Select演示:
<select id='t_select' name='t_select'>
<option value='aa'>aa001</option>
<option value='bb'>bb002</option>
<option value='cc'>cc003</option>
<option value='dd'>dd004</option>
</select>
<br>Select('t_select','cc');
<br><br>
Checkbox演示:
<input type='checkbox' id='t_box' value=0>已经阅读
<br>Checkbox('t_box', 1);
<br><br>
Radio演示:
<input type='radio' id='t_radio1' name='f_radio' value='aaa'>R1
<input type='radio' id='t_radio2' name='f_radio' value='bbb'>R2
<input type='radio' id='t_radio1' name='f_radio2' value='caaa'>R1
<input type='radio' id='t_radio2' name='f_radio2' value='cbbb'>R2
<br>Radio('f_radio', 'bbb');
<br><br>
Dis演示:<br>
Dis('t_input','t_select','t_box','t_radio1');
<br><br>
Submit演示:<br>
Submit('tf');
<textarea id='t_textarea' name='f_radio'></textarea>
<form action='0' name='tf' target='_blank'></form>
<script>
Set('t_input','123456'); //这个是设置input的值
Set('t_select','cc'); //这个是设置select的值
Set('t_box', 1); //这个是设置checkbox的值
Set('f_radio', 'bbb'); //这个是设置radio的值
Set('f_radio2', 'cbbb');
Set('t_textarea', 'cbbb'); //这个是设置textarea的值
Dis('t_input','t_select','t_box','t_radio1'); //这个是禁用某个元素,可以设置一个或多个参数
Submit('tf'); //这个是提交name为tf的表单
</script>
无论是文本框还是下拉菜单,现在你只需要调用 Set(元素id,元素的值);
如果需要获取页面的元素,只需要 $('元素id') 就可取得元素,效果同 document.getElementById ,要取得多个元素,则设置多个参数。
四、结束
总之搞程序,就要学会偷懒,尽量一劳永逸。。。。。