将数组从Html组合到Jquery
将数组从Html组合到Jquery
提问于 2018-02-10 06:01:54
我有一个输入类型文本，如下所示
<input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" >
<input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" >
<input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" >
<input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" >我使用这些输入值如下
//submitotp is my submit button
$("#submitotp").click(function(){
var otp = $(".myinputs").
//HERE i WANTS TO COMBINE ALL 4 Input
}例如，如果
Input-1 = 5
Input-2 = 4
Input-3 = 9
Input-4 = 2
var otp = 5492 //THIS IS O/p 现在我想要的是将所有的输入值合并到一个。为此，我将参考这个链接。但是对于this.also灵车对jQuery.merge()没有任何确切的了解，但是没有帮助或不理解。那我该怎么做呢？
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-02-10 06:08:14
您可以使用.each()循环，获取值并将其存储/推送到数组变量中。可以使用join()连接数组。
您还必须将类重命名为myinputs而不使用[]。
$(document).ready(function() {
$("#submitotp").click(function() {
var otp = [];
$(".myinputs").each(function() {
otp.push($(this).val());
});
console.log(otp.join(""));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<button id="submitotp" type="button">Click Me!</button>
http://api.jquery.com/jquery.each/
Stack Overflow用户
发布于 2018-02-10 06:06:46
获取所有元素，迭代以获得值，最后将它们连接在一起。
// get all elements using the class name
// or using name $('[name="myinputs[]"]')
var res = $('.myinputs')
// iterate over the elements
.map(function(){
// return the value
return this.value;
})
// get result as an array from jQuery object
.get()
// join them to generate result string
.join('');
$('#check').click(function() {
console.log($('.myinputs').map(function() {
return this.value;
}).get().join(''));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" minlength="1" maxlength="1" class="myinputs" value="5">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="4">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="9">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="2">
<button id="check">Get OTP</button>
不使用jQuery
// get all inputs and convert into array
// for newer browser you can use Array.from()
// fonr convertitng into array
var inputs = [].slice.call(document.querySelectorAll('.myinputs'));
document.getElementById('check').addEventListener('click', function() {
console.log(
// iterate and get value of inputs
inputs.map(function(ele) {
return ele.value;
// join values finally
}).join('')
);
// or using reduce method
console.log(
// iterate over elements
inputs.reduce(function(str, ele) {
// concatenate with string and return
return str + ele.value;
// set initial value as empty string
}, '')
);
});<input type="text" minlength="1" maxlength="1" class="myinputs" value="5">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="4">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="9">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="2">
<button id="check">Get OTP</button>
Stack Overflow用户
发布于 2018-02-10 06:08:54
不要将[]放在class属性中。虽然它是合法的，但它使得在jQuery选择器中访问它变得更加困难，因为[]在那里有着特殊的含义。所以使用class="myinputs"。
然后，您的选择器需要使用.来查找它们，而不是使用#，后者用于按ID进行选择。
一旦完成了这些操作，就可以使用.each()对它们进行循环并连接这些值。
$("#submitotp").click(function() {
var otp = "";
$(".myinputs").each(function() {
if (this.value) {
otp += this.value
}
});
console.log(otp);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<input type="text" minlength="1" maxlength="1" class="myinputs">
<br>
<input type="button" id="submitotp" value="Submit">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48717767
复制相关文章
相似问题
腾讯云开发者
