写给新手: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>

 

运行效果图:
posted @ 2011-12-20 19:59  ferrinweb  阅读(1323)  评论(2编辑  收藏  举报