• 写给新手: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>
    运行效果图:
  • 相关阅读:
    TERSUS笔记员工信息518Tersus数据库下拉菜单<Placeholder Text>默认值点击事件
    TERSUS笔记员工信息517Tersus数据库元件SQL语句传入相关问题总结
    010editor 注册分析[1]
    StartAllBack_3.3.5 记录
    pdb 符号路径
    win10 双机调试环境
    省选联考 2022 题解
    AtCoder Regular Contest 139
    AGC 营业记录
    AtCoder Grand Contest 029
  • 原文地址:https://www.cnblogs.com/imyeah/p/2295089.html
Copyright © 2020-2023  润新知