教你JS更简单的获取表单中数据(formdata)

Kathy ·

更新时间:2024-09-20

· 488 次阅读

在文章正式开始之前呢，先介绍一个知识点，那就是var和let的区别，查看了各路大佬的文章，也经过各种尝试，最终得出的结果是，let声明的变量只在该变量对应的块中有效，有点局部变量的意思，而且let相对来说更加的严格。

正式开始我们的formdata之路，曾经稚嫩的我们在取form表单的值（value）时，都是这样的

<form action="" method="post">
<input type="text" name="name" id="name" value="aaa">
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="提交" id="submit">
</form>
<script>
var name1 = document.getElementById('name').value; //获取id为name的值
var submit1 = document.getElementById('submit');//获取submit.准备为其绑定事件
submit1.onclick = function(){alert(name1)}//为submit绑定点击事件，将name的值在也页面弹窗显示
</script>

上面这种方法获取表单的值，不仅麻烦，而且代码量大，我们一起来看看更快更简洁的方法
第一种：获取普通input中的值

<!--onsubmit事件是在提交表单时触发-->
<!-- return 一个函数：是指当函数的返回值位false时，表单不提交，为true时提交-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<!--mySumit函数中的参数this是指form调用该函数时会将form传入函数中-->
<input type="text" name="username" >
<input type="submit" name="submit" >
</form>
<script>
function mySubmit(form){
<!--定义formData对象-->
let formData = new FormData(form);
<!--利用fromData对象的get方法获取表单数据-->
let username = formData.get('username');
<!--进行一些判断或者操作-->
if(username.length < 5){
alert('用户名不得小于5位');
return false;
}else{
return true;
}
return false;
}
</script>

第二种：获取type为checkbox类型的input的值

<form action="" method="post" onsubmit="return mySubmit(this)">
<input type="checkbox" name="hoppy" value="music">音乐
<input type="checkbox" name="hoppy" value="game">游戏
<input type="checkbox" name="hoppy" value="movie">电影
<input type="submit" name="" value="提交">
</form>
<script>
function mySubmit(form){
//定义formData对象
let formData = new FormData(form);
//获取值，因为get只能获取一个值，而这里是多选框，所以这里使用getAll方法
let hoppy1 = formData.getAll('hoppy');
console.log(hoppy1);
//页面数据不进行提交，只是进行测试
return false;
}
</script>

到此这篇关于JS更简单的获取表单中数据(formdata)的文章就介绍到这了,更多相关js获取表单数据内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

表单数据 formdata js

1024 个赞