JS-操作表单

最新推荐文章于 2022-05-22 21:39:00 发布

爱喝椰汁的木木

最新推荐文章于 2022-05-22 21:39:00 发布

阅读量391

点赞数

分类专栏：前端部分文章标签： javascript

本文链接：https://blog.csdn.net/qq_45503643/article/details/110188395

版权

前端部分专栏收录该内容

10 篇文章 0 订阅

订阅专栏

获取和修改表单的值

用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。

<form action="" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>

    <!--多选框-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="man">男
        <input type="radio" name="sex" value="women" id="women">女
    </p>
</form>


<script>
    var input_text = document.getElementById('username');
    var man_radio = document.getElementById('man');
    var women_radio = document.getElementById('women');

    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value = 'hello';

    //对于单选框，多选框等固定的值，man_radio.value只能取到当前的值
    man_radio.checked;//查看返回的结果，是否为true,如果为true，则被选中
    women_radio.checked = true;//赋值，让女被选中
</script>

操作输入框

获取输入框的值和修改输入框的值结果如图：

在这里插入图片描述 操作多选框

xx.checked;判断如果被选中就返回true，xx.checked = true;//赋值，让xx被选中。

在这里插入图片描述

提交表单

很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。

不改变用户的输入，可以利用实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件
onsubmit = 绑定一个提交检验函数， true false
将这个结果返回给表单，使用onsubmit接收
οnsubmit="return check()
-->
<form action="https://www.baidu.com" method="post" onsubmit="return check()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>

<script>
    function check() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        //pwd.value = md5(pwd.value);提交时密码会变长
        md5pwd.value = md5(pwd.value);

        //可以校验判断表单内容，true就是通过提交，false阻止提交
        return true;
    }
</script>
</body>
</html>

爱喝椰汁的木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-操作表单

获取和修改表单的值用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。<form action="" method="post"> <p> <span>用户名：</span> <input type="text" id="username"> </p>  <p> <span>性
复制链接

扫一扫