js获取多个input的值

在JavaScript中，获取多个input元素的值可以通过多种方式实现，具体取决于你的需求和HTML结构。以下是几种常见的方法：

方法一：使用querySelectorAll和forEach

如果你有多个input元素，并且它们具有相同的类名或标签名，你可以使用querySelectorAll来选择这些元素，然后使用forEach遍历它们并获取每个元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Input Values</title>
</head>
<body>

<input type="text" class="myInput" value="Value 1">
<input type="text" class="myInput" value="Value 2">
<input type="text" class="myInput" value="Value 3">

<button onclick="getInputValues()">Get Values</button>

<script>
function getInputValues() {
  const inputs = document.querySelectorAll('.myInput');
  const values = [];
  inputs.forEach(input => {
    values.push(input.value);
  });
  console.log(values); // 输出: ["Value 1", "Value 2", "Value 3"]
}
</script>

</body>
</html>

方法二：使用FormData

如果你的input元素在一个表单中，你可以使用FormData对象来获取所有输入值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Input Values</title>
</head>
<body>

<form id="myForm">
  <input type="text" name="input1" value="Value 1">
  <input type="text" name="input2" value="Value 2">
  <input type="text" name="input3" value="Value 3">
</form>

<button onclick="getInputValues()">Get Values</button>

<script>
function getInputValues() {
  const form = document.getElementById('myForm');
  const formData = new FormData(form);
  const values = [];
  for (const [key, value] of formData.entries()) {
    values.push(value);
  }
  console.log(values); // 输出: ["Value 1", "Value 2", "Value 3"]
}
</script>

</body>
</html>

方法三：使用jQuery（如果你已经在项目中使用了jQuery）

如果你已经在项目中使用了jQuery库，你可以简单地使用.map()函数来获取所有input的值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Input Values</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" class="myInput" value="Value 1">
<input type="text" class="myInput" value="Value 2">
<input type="text" class="myInput" value="Value 3">

<button onclick="getInputValues()">Get Values</button>

<script>
function getInputValues() {
  const values = $('.myInput').map(function() {
    return $(this).val();
  }).get();
  console.log(values); // 输出: ["Value 1", "Value 2", "Value 3"]
}
</script>

</body>
</html>

应用场景

表单提交前的数据验证：在用户提交表单之前，你可以获取所有输入值并进行验证。
动态数据处理：在单页应用程序（SPA）中，你可能需要实时获取和处理用户输入的数据。
数据分析和报告：在数据分析应用中，你可能需要收集用户的输入数据来生成报告或进行进一步的处理。

可能遇到的问题及解决方法

问题：获取的值为空或不正确。原因：可能是由于DOM元素尚未加载完成，或者选择器没有正确匹配到元素。 解决方法：确保在DOM完全加载后再执行JavaScript代码，可以使用window.onload事件或者将脚本放在HTML文档的底部。同时检查选择器是否正确。

window.onload = function() {
  // 你的代码
};

或者

<script>
// 你的代码
</script>
</body>
</html>

通过以上方法，你可以有效地获取多个input元素的值，并根据需要进行处理。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

input获取焦点原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。...主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中 8.oninput...当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js给input...dom元素添加相应的事件， 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.8K6 0

ASP获取多个CheckBox的值

input name="yi" type="checkbox..." id="yi" value="111" /> input name="yi" type="checkbox" id="yi" value="222" /> input name="yi..." type="checkbox" id="yi" value="333" /> input type="submit" name="Submit" value="提交" /> ...") 在前一页呢，这些控件你如果是同一组的，就是id都是相同的，那这里得到的就是它们被选中的控件的value值，每个value值中间是用,分割的如果你要一个一个单独处理呢，只要用split函数就成把每一个...value值取到了 eg: dayes = request.Form("dayes") dayes=split(dayes,",") for i=0 to ubound(dayes) %> <%response.Write

5.4K2 0

Golang flag 获取多个值

Golang flag 获取多个值 Posted June 26, 2017 flag包是golang中处理command line参数标准库。...GoDoc: https://golang.org/pkg/flag/ 但是在某些情况下，我们要对一个key指定多个值。并获取多个值得数组。...接口类型 Go type Value interface { String() string Set(string) error } 重写Set方法, 处理每个value，追加到最终的数组...(i *arrayFlags) String() string { return fmt.Sprint(*i) } // Set 方法是flag.Value接口, 设置flag Value的方法.... // 通过多个flag指定的值，所以我们追加到最终的数组上. func (i *arrayFlags) Set(value string) error { *i = append(*i,

4.5K2 0

jquery获取input 复选框值

第一种： var tempArray = new Array(); $("input:checkbox[class='chk_list']:checked").each(function...i){ tempArray[i] = $(this).val(); }); var idstr=tempArray.join(','); ("input...checkbox:checked").each(function(i){ tempArray[i] = 第二种： var tempArray = new Array(); ("input

2621 0

微信小程序获取input值的方法

1、bindinput input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'>input> 其中...e.detail是获取input数据其中包含value值, cursor是获取光标的位置。...type='text' name='username' placeholder="请输入用户名">input> input type='password' name='password' placeholder...button> 重置数据表单在js 中获取数据，通过data.detail.value...获取数据,获得的是json对象数据键值对一一对应 loginForm: function(data) { console.log(data.detail.value)// {username:

4.3K2 0

React技巧之表单提交获取input值

~ 总览在React中，通过表单提交获得input的值：在state变量中存储输入控件的值。...需要注意的是，输入控件没有onChange属性或者值设置。你可以用defaultValue属性给一个不受控制的input传递一个初始值。...需要注意的是，当你改变ref的current属性的值时，不会导致重新渲染。每当用户提交表单时，不受控制的input的值会被打印。...reset 如果你想在表单提交后清除不受控制的input值，你可以使用reset()方法。 reset()方法还原表单元素的默认值。...不管你的表单有多少不受控制的输入控件，只要调用reset()方法就可以清除所有的字段。当表单被提交时，获取输入控件值的另一种方法是，使用name属性访问表单元素。

1.6K2 0

js获取ModelAndView值的问题

大家好，又见面了，我是你们的朋友全栈君。 JS当中不能接收ModelAndView的返回值吗？一定要在JSP页面中才能接收吗? 1 方法一【有效】可以的，跟el表达式访问方式一样。...台返回的是js，还是json？这个一定要搞清楚！...假设后台返回的字符串存储在responseText里，那么如果是js，就 var result = eval("(" + responseText + ")"); 如果是json，就 var result...= JSON.parse(responseText); 3 方法三【有效】加入隐藏字段， input id="autoflag" type="hidden" value="${autoflag...，如果这个文章写得还不错，觉得有点东西的话 ~求点赞求关注❤️ 求分享❤️ 各位的支持和认可，就是我创作的最大动力，我们下篇文章见！

17.8K2 0

JS获取URL“#”后的值

http://localhost:62683/youli/product.htm#0 alert(GetRequest()); //获取#号值 function GetRequest() {

54.5K2 0

原生JS获取input上传的图片返回的地址

-- 在CSS中将input隐藏，UI效果用label展示 --> input type="file" name="upload_file" id="uploadFile" onchange=...-- 没有上传的时候不显示 ,上传以后添加src--> 的文件 // 点击上传图片 function uploadImg(){ let file = document.getElementById('uploadFile').files...: 58px; height: 58px; border: 1px solid #ccc; margin-left:42px; margin-top:10px; } input

22.3K1 0

微信小程序input框输入值获取

提交表单时获取输入框的值 wxml 的数据触发 submit 事件 --> input value="{{ age }}" name="age">...(e) { console.log(e.detail.value); //e.detail.value获取到的是一个对象通过每个输入框设置的name属性获取值 //例如e.detail.value.age...} }) 实时更新输入框的值效果图 wxml {{value}} input bindinput="oninput">input> js Page({ data: { value: '默认值'

4K2 0

js：如何获取select选中的值

我想获取select选中的value，或者text，或者…… 比如这个：的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options...的text： myselect.options[index].text; 5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute(‘url’...); 二：jQuery方法 1:var options=$(“#select option:selected”); //获取选中的项 2:alert(options.val()); //拿到选中项的值...3:alert(options.text()); //拿到选中项的文本 4:alert(options.attr(‘url’)); //拿到选中项的url值版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人

26.8K3 0

JS和JQuery获取label的值

name="input_blog" id="input_blog" value="http://blog.ithomer.net"> input> label 获取值： label标签在JS和Jquery...中使用不能像其他标签一样用value获取它的值 // input get value var input = document.getElementById("input_blog"); var value...正确获取： // js label get value var label = document.getElementById("label_blog"); var value = label.innerText.trim...// js set value $("#input_blog").val("http://proxy.ithomer.net"); // jquery set value 完整测试代码： js set value $("#input_blog").val("http://proxy.ithomer.net"); // jquery set value // set

9.2K2 0

cssjshtml vue.js if过滤 if多个值

葫芦的运维日志实现功能：通过表单内每行根据status的数值，控制是否显示button。过滤数值的是一个数组列表。...}); if (flag === true) { return true } return false }, 葫芦的运维日志

3.4K3 0

js 获取input的value值及验证手机号和汉字的正则表达式

简单的记录一下： HTML部分： input type="text" name="name" id="name" placeholder="请输入您的姓名" value=""/> input type...js 部分：首先获取到元素： var uname = document.getElementById("name"); var umobile = document.getElementById("mobile...如果字符串中有匹配的值返回 true ，否则返回 false。语法： RegExpObject.test(string) RegExpObject 验证规则。 string 要检测的字符串。..."w3h5" patt=/w3h5/g; result=patt.test(str); document.write("返回值: " + result); 以上实例输出结果：返回值: true...返回值: false

9.8K0 0

input事件的获取

大家好，又见面了，我是你们的朋友全栈君。 loop线程已经运行起来了，如果不出意外，它是不会终止的；不妨以此为起点，再开始一段新的旅程，我要去探索input事件的获取。...mBuiltInKeyboardId为0 int32_t type; //device操作，添加，移除或者事件类型 int32_t code; //事件编码 int32_t value; //值...再继续就是正确的动作了。一个input事件确实产生的时候，与内核进入evdev所有事件的简单时间戳相比，有些input外设可能有更好的时间概念。...这是Android定制的input协议扩展，主要用于基于device drivers的虚拟input设备。iev.type == EV_MSC表示事件类型是重写时间戳。...写完这些input事件就获取到了，会保存在RawEvent mEventBuffer[EVENT_BUFFER_SIZE]中。

3.2K2 0

js 获取url 传值参数

function GetUrlParms() { var args=new Object(); var query=location.search.substring(1);//获取查询串

36.5K4 0

【说站】Python切片获取列表多个值

Python切片获取列表多个说明 1、单个值可以通过下标获得，多个值可以通过切片获得，并返回一个新列表。将切片输入方括号，用冒号分割。实例 2、在一个切片中，第一个整数是切片开始处的下标。...第二个整数是切片结束处的下标。...list = ['cat','dog','fish','pig'] print(list[1:3]) print(list[0:-1]) 省略第一个值是从下标为0开始,省略第二个值是截取到末尾 print...打印结果: ['dog', 'fish'] ['cat', 'dog', 'fish'] ['cat', 'dog'] ['cat', 'dog', 'fish', 'pig'] 以上就是Python切片获取列表多个值的方法

1.1K2 0

微信小程序获取input框的值双向数据绑定

input value='{{val}}' bindinput="getval" /> data：{ val: '' } getval(e) { console.log(e.detail.value...) this.setData({ val: e.detail.value }) }, 在你输入的时候开发工具就会打印出来，如果没有，是开发工具调试基础库的问题，我之前用的...2.9.3的版本，bindinput失效，换了之后才成功

3.1K1 0

Excel公式练习58：获取与查找值相对应的多个值

本次的练习是：如下图1所示，单元格区域A1:B7中存放着数据，要求使用公式查找单元格D2中的分类对应的名称。例如，单元格D2中是“水果”，则从列B中获取是水果的名称并放置在列E中。 ?...图1 要求在E2中输入公式，向下拖拉以获取全部满足条件的数据。先不看答案，自已动手试一试。...公式解析公式中的： COUNTIF(A:A,$D$2)<ROWS($E$2:E2) 用来计算符合条件的结果数，并与已放置值的单元格数（已返回的值）相比较，以确定在单元格中输入的值。...FALSE;6;FALSE},ROW(A1))) 转换为： INDEX(B:B,SMALL({2;3;FALSE;FALSE;6;FALSE},1)) 转换为： INDEX(B:B,2) 得到单元格B2中的值...：苹果当向下拖拉时，ROW(A1)将更新为ROW(A2)、ROW(A3)……，得到值2、3……等，从而可以获取相应位置的值。

2.8K4 0

input的属性值_input标签常用的属性

大家好，又见面了，我是你们的朋友全栈君。...input name=”txtPwd” type=”password” maxlength=”20″ id=”txtPwd” class=”lg_input” οnpaste=”return false

4.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云