写给新手:js的表单操作(一)
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 286
下面的代码实现了js切换搜索引擎的功能,这种搜索模块在很多网站很常见,这里将精简的代码提供给广大初学者学习参考。代码主要包含了js对表单元素属性的控制内容同时包含表单提交的另一种方式。js代码中创建

  下面的代码实现了js切换搜索引擎的功能,这种搜索模块在很多网站很常见,这里将精简的代码提供给广大初学者学习参考。代码主要包含了js对表单元素属性的控制内容同时包含表单提交的另一种方式。

  js代码中创建了两个函数"searchtool()"和"isaddkey()",通过鼠标动作来调用,分别实现表单提交地址的控制、查询关键字的转换和验证是否已经填写搜索内容。

  代码简单,但是实用性很强,希望能给刚刚学习html表单和js不久的朋友提供有益的引导。

代码:
 1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 </head>
5 <body>
6 <form action=" http://www.baidu.com/s" method="get" name="form1">
7 <p>
8 <label for="baidu">
9 <input type="radio" id="baidu" value="0" checked="checked" onClick="searchTool(0)" />
10 百度</label>
11 <label for="google">
12 <input type="radio" id="google" value="1" onClick="searchTool(1)" />
13 谷歌</label>
14 </p>
15 <p>
16 <input type="text" name="wd" id="keywordbox" value="" />
17 </p>
18 <p>
19 <input type="button" value="搜索" onClick="isaddkey()" />
20 </p>
21 </form>
22 <div id="note"></div>
23 </body>
24 <script type="text/javascript">
25 function searchTool(imyeah){
26 if(imyeah==0){
27 form1.action="http://www.baidu.com/s";
28 document.getElementById("keywordbox").name="wd";
29 }
30 else if(imyeah==1){
31 form1.action="http://www.google.com.hk/search";
32 document.getElementById("keywordbox").name="q";
33 }
34 }
35 function isaddkey(){
36 if(document.getElementById("keywordbox").value==""){
37 document.getElementById("note").innerHTML="<span style='color:red'>Note: 请输入查询内容!</span>"
38 return false;
39 }
40 else{
41 form1.submit();
42 }
43 }
44 </script>
45 </html>

 

运行效果图:
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2