js控制表单操作的常用代码小结

1.鼠标经过时自动选择文本
Code:


代码如下:

鼠标划过自动选中:<input type="text" value="默认值" onMouseOver="this.focus();" onfucus="this.seelct()" />

2.设置单选按钮
Code:


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function getChoice(){
var oForm=document.forms["myForm1"];
var aChoice=oForm.camera;
for(i=0;i<aChoice.length;i++)
if(aChoice[i].checked)
break;
alert("您使用的相机品牌是:"+aChoice[i].value);
}
function setChoice(iNum){
var oForm=document.forms["myForm1"];
oForm.camera[iNum].checked=true;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>您使用的相机品牌</p>
<p>
<input type="radio" name="camera" id="canon" value="Canon">
    <label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
    <label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony">
    <label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Tentax">
    <label for="pentax">Tentax</label>
</p>
<p>
<input type="button" value="检查选中对象" onClick="getChoice();">
    <input type="button" value="设置为Canon" onClick="setChoice(0);">
</p>
</form>
</body>
</html>

3.设置复选框
Code:


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function changeBoxes(action){
var oForm=document.forms["myForm1"];
var oCheckBox=oForm.hobby;
for(var i=0;i<oCheckBox.length;i++)//遍历每一个选项
if(action<0) //反选
oCheckBox[i].checked=!oCheckBox[i].checked;
else
oCheckBox[i].checked=action;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
    <label for="ball">打球</label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
    <label for="TV">看电视</label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
    <label for="net">上网</label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
    <label for="book">看书</label>
</p>
<p>
<input type="checkbox" name="hobby" id="run" value="run">
    <label for="run">跑步</label>
</p>
<p>
       <input type="button" value="全选" onClick="changeBoxes(1);">
    <input type="button" value="全不选" onClick="changeBoxes(0);"/>
    <input type="button" value="反选" onClick="changeBoxes(-1);"/>
</p>
</form>
</body>
</html>

4.设置下拉菜单
下拉菜单中最重要的莫过于访问被用户选中的选项,对于单选下拉菜单可以通过selectedIndex属性轻松地访问到选项。
Code:


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>js操作表单</title>
<script language="javascript">
function checkSingle(){
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.constellation;
var iChoice=oSelectBox.selectedIndex;//获取选中项
alert("您选中了:"+oSelectBox.options[iChoice].text);
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="">
<p>
<select id="constellation" name="constellation">
     <option value="Aries" selected="selected">白羊</option>
        <option value="Taurus">金牛</option>
        <option value="Gemin">双子</option>
        <option value="Leo">狮子</option>
        <option value="Virgo">处女</option>
    </select>
</p>
<p>
<input type="button" value="查看选项" onClick="checkSingle();" />
</p>
</form>
</body>
</html>

时间: 2013-08-14

javascript阻止浏览器后退事件防止误操作清空表单

由于客户大多数是不懂电脑的大菜鸟.所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了.网上查了好多资料,然后整合了一下.分享给大家.也希望酸奶姐姐来看看我的第一篇技术博客.呵呵(别介意我提到了你哦.).废话不多说.上源码. 复制代码 代码如下: $(function(){ //处理键盘事件 禁止后退键(Backspace)密码或单行.多行文本框除外 function banBackSpace(e){ var ev = e || window.ev

JavaScript操作表单实例讲解(上)

一.获得表单引用 1>通过直接定位的方式来获取 document.getElementById(); document.getElementsByName(); document.getElementsByTagName(); 2>通过集合的方式来获取引用 document.forms[下标] document.forms["name"] document.forms.name 3>通过name直接获取"(只适用于表单) document.name 二.获得

Javascript操作表单实例讲解(下)

在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示: 一.文本域 <input type="text" /> ----------------------------- 操作文本域的值 value 属性 设置或者获取值 ----------------------------- 二.单选按钮和多选按钮 <input type="radio" /> <

js的表单操作 简单计算器

代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

thinkPHP5 ajax提交表单操作实例分析

本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <

laravel框架学习记录之表单操作详解

本文实例讲述了laravel框架学习记录之表单操作.分享给大家供大家参考,具体如下: 1.MVC数据流动 拿到一个laravel项目最基本的是弄清楚它的页面请求.数据流动是怎样进行的,比如当通过get请求index页面时,如何显示如下的学生信息列表: 首先当一个页面请求到达时,需要在routes/web.php中定义路由请求以及对应的处理方法: Route::get('index','StudentController@getIndex'); 然后在.env文件下设置好数据库连接,新建数据库模型

Java利用HttpClient模拟POST表单操作应用及注意事项

HttpClient使用post方法提交数据 源代码: 复制代码 代码如下: package post; import Java.io.IOException; import org.apache.commons.httpclient.Header; import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.HttpException; import org.apache.commo

Jquery操作radio,checkbox,select表单操作实现代码

一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#s

PHP使用HTML5 FormData对象提交表单操作示例

本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的

Django框架表单操作实例分析

本文实例讲述了Django框架表单操作.分享给大家供大家参考,具体如下: HTML表单是网站交互性的经典方式. 开始学习如何用Django对用户提交的表单数据进行处理. HTTP 请求 HTTP协议以"请求-回复"的方式工作.客户发送请求时,可以在请求中附加数据.服务器通过解析请求,就可以获得客户传来的数据,并根据URL来提供特定的服务. GET 方法 在之前的项目中创建一个 search.py 文件,用于接收用户的请求: /djangoPro/djangoPro/search.py

Jquery响应回车键直接提交表单操作代码

事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了.索性让 Jquery 也接管 回车键的响应吧: 复制代码 代码如下: $("#loginbox input[type='submit']").click(function() {     //Ajax 与服务器交互验证 }); $('#loginbox').keydown(function(e){     if(e.keyCode

jQuery表单验证简单示例

本文实例讲述了jQuery表单验证简单用法.分享给大家供大家参考,具体如下: 这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面 jquery 表单验证 就是验证表单里面所信息都为必填 //注册页面验证机制 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码 $("#username_error").removeClass("erro