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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP 时间日期操作实战
2011/08/26 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python通过len函数返回对象长度
2020/10/22 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
高中军训感想800字
2014/02/23 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
毕业横幅标语
2014/10/08 职场文书
廉政承诺书范文
2015/04/28 职场文书
入学证明
2015/06/23 职场文书