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 冒号 使用说明
Jun 06 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Element Carousel 走马灯的具体实现
Jul 26 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Python中的下划线详解
2015/06/24 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python __slots__的使用方法
2020/11/15 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
办理信用卡工作证明
2014/01/11 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
租房安全协议书
2014/08/20 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
郭明义观后感
2015/06/08 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
八年级作文之友情
2019/11/25 职场文书