Question

我的输入类型文本为以下代码

<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

现在我想要的是将所有输入值组合成一个。因为我引用了这个link。但是没有得到任何确切的想法。还有关于jQuery.merge（）的hearse，但没有帮助或不理解。那我该怎么做呢？

Answer 1

获取所有元素，迭代以获取值并最终将它们连接在一起。

// 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>

Answer 2

不要将[]放入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">

Answer 3

几个指针：

请勿在类属性中使用[]。
使用.将类用作选择器。
您需要遍历输入元素以获取其值。

$("#submitotp").click(function(){
      var otp = "";
      
      // Traverse through all inputs
      $(".myinputs").each(function(){
           otp += $(this).val();
        }
      );
      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" value="9">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="1">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="3">
<input type="text" minlength="1" maxlength="1" class="myinputs" value="5">

<button id="submitotp">Get OTP</button>

Answer 4

您可以使用.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/

Answer 5

这将很容易实现：

UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3)

或

var otp = Array.from($(".myinputs")).reduce((re,ele)=>re+ele.value,'')

将数组从Html结合到Jquery

5 个答案: