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 相关文章推荐
js中if语句的几种优化代码写法
Mar 12 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python交换两个变量的值方法
2019/01/12 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
机电一体化职业规划书
2014/01/07 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis