js实现不提交表单获取单选按钮值的方法


Posted in Javascript onAugust 21, 2015

本文实例讲述了js实现不提交表单获取单选按钮值的方法。分享给大家供大家参考。具体如下:

这是JS实现的特效,不提交表单获取相关的控件值。如本例所示,不提交表单即可获取单选按钮的值。

运行效果截图如下:

js实现不提交表单获取单选按钮值的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>不提交表单获取单选按钮的值</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<script type="text/javascript">
function getVal(){
 var CardTypeValue;
 for (i=0;i<form1.CardType.length;i++){
  if (form1.CardType[i].checked){
   CardTypeValue=form1.CardType[i].value;
   break; //使用该语句可以减少不必要的循环次数
  }
 }
 if(CardTypeValue=="身份证"){
  if(form1.pcard.value.length!=15 && form1.pcard.value.length!=18){
   alert("您输入的证件号码有误!");form1.CardType.focus();return;
  }
 }else{
  if(CardTypeValue=="学生证"){
   if(form1.pcard.value.length!=8 && form1.pcard.value.length!=12){
    alert("您输入的证件号码有误!");form1.CardType.focus();return;
   }  
  }
 }
}
</script>
</head>
<body>
<table width="650" height="34" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#B3CAEE">
 <tr class="font_white">
 <td height="22" align="center"><span class="style1">====== 用户注册信息 ======</span></td>
 </tr>
</table>
<table width="650" height="205" border="0" align="center" cellpadding="-2" cellspacing="-2" class="tableBorder">
 <tr valign="top">
 <td height="171" colspan="3"><table width="100%" height="129" border="0" cellpadding="-2" cellspacing="-2">
  <tr>
   <td valign="top">
   <table width="100%" height="265" border="0" cellpadding="-2" cellspacing="-2" class="tableBorder_Top">
    <tr>
    <td height="5"></td>
    </tr>
    <tr>
    <td width="195" height="263" valign="top"><table width="100%" border="0" cellspacing="-2" cellpadding="-2">
     <tr>
      <td width="55%" height="82" align="center" class="word_grey"></td>
      <td width="45%" align="left" class="word_grey"><b>注册帮助</b></td>
     </tr>
     <tr>
      <td height="112" colspan="2" valign="top" class="word_grey"><ul>
       <li> 用户名:为用户登录留言簿的通行证,可使用英文字母、数字或英文字母、数字、下划线的组合,长度控制在3-20个字符之内。</li>
       <li>真实姓名: 请输入真实的姓名,该项为隐藏项,用户可以放心输入。</li>
       <li>Email:请填写有效的Email地址,以便与您联系。</li>
      </ul></td>
     </tr>
     <tr align="center">
      <td colspan="2" valign="middle" class="word_grey"></td>
     </tr>
    </table></td>
    <td width="19" background="Images/line.gif"></td>
    <td width="436" valign="top"><br>
     <br>
     <table width="90%" border="0" align="center" cellpadding="-2" cellspacing="-2">
      <tr>
      <td><form name="form1">
       <table width="100%" border="0" cellspacing="-2" cellpadding="-2">
       <tr>
        <td width="18%" height="30" align="center">用
        户 名:</td>
        <td width="82%"><input name="UserName" type="text" id="UserName4" maxlength="20">
        * </td>
       </tr>
       <tr>
        <td height="28" align="center">真实姓名:</td>
        <td height="28"><input name="TrueName" type="text" id="TrueName4" maxlength="10">
        *</td>
       </tr>
       <tr>
        <td height="28" align="center">证件类型:</td>
        <td><input name="CardType" type="radio" class="noborder" value="身份证" checked>
        身份证 
        <input name="CardType" type="radio" class="noborder" value="学生证">
        学生证</td>
       </tr>
       <tr>
        <td height="28" align="center">证件号码:</td>
        <td class="word_grey"><input name="pcard" type="text" id="Tel" onBlur="getVal()"></td>
       </tr>
       <tr>
        <td height="28" align="center">联系电话:</td>
        <td><input name="tel" type="text" id="Tel"></td>
       </tr>
       <tr>
        <td height="28" align="center" style="padding-left:10px">Email:</td>
        <td class="word_grey"><input name="Email" type="text" id="PWD224" size="35">
        </td>
       </tr>
       <tr>
        <td height="28" align="center">个人主页:</td>
        <td class="word_grey"><input name="homepage" type="text" id="homepage" size="35"></td>
       </tr>
       <tr>
        <td height="34"> </td>
        <td class="word_grey"><input name="Button" type="button" class="btn_grey" value="确定保存">
         <input name="Submit2" type="reset" class="btn_grey" value="重新填写"></td>
       </tr>
       </table>
      </form></td>
      </tr>
    </table></td></tr>
    <tr>
    <td height="5"></td>
    </tr>
   </table></td>
  </tr>
 </table></td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
Javascript编写2048小游戏
Jul 07 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 #Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 #Javascript
纯javascript实现图片延时加载方法
Aug 21 #Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 #Javascript
js变形金刚文字特效代码分享
Aug 20 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
很实用的一个完整email发送程序
2006/10/09 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python实现mean-shift聚类算法
2020/06/10 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
初一科学教学反思
2014/01/27 职场文书
大学生毕业鉴定
2014/01/31 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
股票投资建议书
2014/05/19 职场文书
法人委托书的范本格式
2014/09/11 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
500字小学生检讨书
2015/02/19 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
详解Python requests模块
2021/06/21 Python
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
Linux中各个目录的作用与内容
2022/06/28 Servers