js 表单操作

最新推荐文章于 2022-02-15 15:47:00 发布
最新推荐文章于 2022-02-15 15:47:00 发布
阅读量119 收藏
点赞数
分类专栏： js2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85914114
版权

表单通常通过name获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oForm = document.getElementById('form1');
                alert(oForm.text1.value);
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <input type="text" name="text1" id="text1" value="内容" />
        </form>
    </body>
</html>

onchange:当值发生改变的时候触发

   text:当光标离开的时候如果内容有变化就触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oForm = document.getElementById('form1');
                oForm.text1.onchange = function(){
                    alert(this.value);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <input type="text" name="text1" id="text1" value="内容" />
        </form>
    </body>
</html>

性别：同组中只能选择一个

<input type="radio" name="sex" value="男" />男
 <input type="radio" name="sex" value="女" />女

radio/checkbox：都有默认选中checked

radio/checkbox:标准下点击的时候只要值变了那么就会触发

         非标准下焦点离开的时候如果值变了就会触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oForm = document.getElementById('form1');
                alert(oForm.sex);
                oForm.sex[0].onchange = function(){
                    alert(1);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <input type="text" name="text1" id="text1" value="内容" />
            <input type="radio" name="sex" value="男" />男
            <input type="radio" name="sex" value="女" />女
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oForm = document.getElementById('form1');

                oForm.city.onchange = function(){
                    alert(this.value);
                }
            }
        </script>
    </head>
    <body>
        <form id="form1">
            <select name="city">
                <option value="">请选择城市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oForm = document.getElementById('form1');
                oForm.btn.onclick = function(){
                for(var i=0;i<oForm.sex.length;i++){
                    if(oForm.sex[i].checked){
                        alert(oForm.sex[i].value + '是选中了');
                    }else{
                        alert(oForm.sex[i].value + '是非选中状态');
                    }
                }
                for(var i=0;i<oForm.a.length;i++){
                    if(oForm.a[i].checked){
                        alert(oForm.a[i].value + '是选中了');
                    }else{
                        alert(oForm.a[i].value + '是非选中状态');
                    }
                }
            }
        }
        </script>
    </head>
    <body>
        <form id="form1">
            <input type="text" name="text1" id="text1" value="内容" />
            <input type="radio" name="sex" value="男" />男
            <input type="radio" name="sex" value="女" />女
            <input type="checkbox" name="a" value="html" />html
            <input type="checkbox" name="a" value="css" />css
            <input type="checkbox" name="a" value="js" />js
            <select name="city">
                <option value="">请选择城市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select>
            <input type="button" value="按钮" name="btn" />
        </form>
    </body>
</html>

onchange有兼容性问题，这种方法可以解决兼容性问题

我的奋斗ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
了解JavaScript表单操作和表单域
10-16
本文介绍了JavaScript中表单操作以及表单域，下面我们来一起学习一下吧
JavaScript操作表单元素
pan_junbiao的博客
08-07 1356
表单元素在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。下面将介绍一些常用的使用JavaScript操作表单元素的方法。 1、表单（form） 1.1 使用JavaScript脚本提交form表单 //提交表单 myForm.method = 'POST'; myForm.action = "action.html"; myForm.submit(); 1.2使用J...
JS操作表单
晚先生的博客
10-04 268
操作表单 表单操作和DOM操作基本相同，表单也是DOM树的一部分。 假如有一个表单： ------- ------Submit 假如已经获取了一个节点：var input=document.getElementById('input') 获取输入的值：input.value; 更新文本框的值：input.value='更新的内容' 这种方法适用于text,password,
JavaScript中的this关键字使用详解
大漠雁
10-20 314
JavaScript 中也有 this 关键字
JavaScript的表单操作
Trolife的博客
05-16 189
表单也是一种DOM树HTML表单中的输入控件&lt;input&gt;:文本框，对应的&lt;input type="text"&gt; 用于输入文本；口令框，对应的&lt;input type="password"&gt; 用于输入口令；单选框，对应的&lt;input type="radio"&gt; 用于选择一项；复选框，对应的&lt;input type="c
深入理解Javascript之this关键字
liqiangcfc的专栏
01-14 490
<br /><br />Javascript是一种很灵活的语言, 而This关键字又是灵活中的灵活, 但是因为它的灵活, 也注定了它的难用.<br />以前我用this的时候, 都会觉得不踏实, 老是担心它不知道怎么地就会指到另外的什么地方.<br />其实, 这都是因为, 我们对它的不了解.<br />刚好最近再给百度学院做《Javascript高级-作用域/原型链》的ppt, 而swit1983网友也刚好提这个问题, 索性就把这部分内容独立总结出来, 与大家分享.<br />首先, 我先抛出一个定论:”
JavaScript操作表单实例讲解(上)
10-22
主要介绍了JavaScript操作表单实例讲解(上)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
js的表单操作 简单计算器
12-12
代码： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...写给新手：js简单计算器</title> <style type=”text/
JavaScript操作表单_动力节点Java学院整理
10-19
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。下面通过本文给大家介绍JavaScript操作表单的相关知识，感兴趣的朋友一起看看吧
js 操作表单
xustart7720的博客
11-21 5740
用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。HTML表单的输入控件主要有以下几种： 文本框，对应的<input type="text">，用于输入文本； 口令框，对应的<input type="password">，用于输入口令；
使用JS实现表单验证
星海IT学习之路
07-02 1万+
目录表单页面展示FormCheck.jspCSS样式Register.cssJavaScript代码FormCheck.js 以注册页面为例实现表单验证功能。 表单页面展示 FormCheck.jsp <!DOCTYPE html> < html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面表单校验</title> <link rel="st
利用js提交form表单的方式
热门推荐
ruolanqingyi的博客
06-27 4万+
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功&lt;script type="text/javascript"&gt; function validate(obj) { if (confirm("提交表单?")) { alert(obj.value); return true; } els...
JS表单使用总结
wangangie5
07-05 143
　　1 javascript刷新页面的方法 　　window.location.reload(); 　　使用window.open()弹出的弹出窗口，刷新父窗口 　　window.opener.location.reload() 　　使用window.showDialog弹出的模式窗口 　　window.dialogArguments.location.reload(); 　　2...
单选框（radio）实现性别选择,js通过name来控制性别的radio选择value对应的单选
github_66624340的博客
02-15 2154
$("input[name='U_SEX'][value="+获取到的值需要对应radio中value+"]").attr('checked','true');
JS学习——表单验证
weixin_51963604的博客
05-26 4032
JS(JavaScript),最先听到的时候以为是和java一样，必须要学的，但是后来接触到后，才发现是不一样的，JS一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果（来源百度百科）。 本文主要是讲将JS如何嵌入HTML中实现表单的验证，会简单介绍下HTML、CSS、JS的内容，以及正则表达式，由于笔者还是个初学者，所以不会很深入，很多地方也是有点模糊不清，不对之处，还望多多指教，觉得不错还请点个赞！ 互联网的三大基石 URL(
js表单的基本操作
weixin_37565521的博客
12-27 198
javascript的增删改查 //循环查看tbody里面的所有checkbox元素，只要有一个是没选中的，那么就非全选，否则就是全选 for ( var i=0; i&amp;amp;lt;checkBoxes.length; i++ ) { if ( !checkBoxes[i].checked ) { checkAll.checked = false; return; } }...
js 焦点事件
qq_35187942的博客
01-06 1万+
焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。 我们可以通过一些方式给元素设置焦点 1 点击 2 tab 3 js 不是所有元素都能够接收焦点，能够相应用户操作的元素才有焦点 onfocus:当元素获取到焦点的时候触发 onblur：当元素失去焦点的时候触发 &lt;!DOCTYPE html&gt; &lt;html&gt;     &...
nodejsget post请求表单操作
最新发布
09-04
在Node.js中，可以使用`http`模块来处理GET和POST请求的表单操作。...使用以上代码，我们可以在Node.js中处理GET和POST请求的表单操作。GET请求可以从URL中获取查询参数，而POST请求可以从请求体中获取参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值