zoukankan      html  css  js  c++  java
  • 写给新手: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>
    运行效果图:
  • 相关阅读:
    jQuery easyui datagrid pagenation 的分页数据格式
    Mysql操作符号
    jquery JSON的解析方式
    线程有几种状态
    工作日志2014-07-07
    leetcode
    Fragment中的setUserVisibleHint()方法调用
    Android开发:Eclipse中SqliteManager插件使用
    海南出差报告总结(案件录入与案件追踪系统)
    Python学习十四:filter()
  • 原文地址:https://www.cnblogs.com/imyeah/p/2295089.html
Copyright © 2011-2022 走看看