Combine Array From Html To Jquery

Question

I Have An Input type text as Following Code

<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[]" >

And I use those inputs value as follow

//submitotp is my submit button
$("#submitotp").click(function(){
      var otp = $(".myinputs").
      //HERE i WANTS TO COMBINE ALL 4 Input 
}

For Example If

Input-1 = 5
Input-2 = 4
Input-3 = 9
Input-4 = 2

var otp = 5492 //THIS IS O/p

Now What i want is to combine all input value to one. for that i refer this link. but didn't get any exact idea for this.also hearse about jQuery.merge() but not helpful or not understand. So how can i do this ?

Becuse i need all Value For An 4 Digit OTP. And send to ajax call — user9341437
– user9341437, Commented Feb 10, 2018 at 6:17

Pranav C Balan · Accepted Answer · 2018-02-10 06:28:32Z

6

Get all elements, iterate to get values and finally join them together.

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

Without using 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>

edited Feb 10, 2018 at 6:28

answered Feb 10, 2018 at 6:06

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user9341437 Over a year ago

.myinputs\\[\\] Not Understand

Adam Azad Over a year ago

OP mistyped name="myinputs[]"

Pranav C Balan Over a year ago

@Suzan : initially your code only contains class class="myinputs[]" , in order to select using a class you need to escape those [ and ] since it has special meaning in a selector... now updated answer with new code

Pranav C Balan Over a year ago

@Suzan : added alternative approach with pure js

Barmar · Accepted Answer · 2018-02-10 06:08:54Z

Don't put [] in class attributes. Although it's legal, it makes it harder to access it in jQuery selectors, because [] has special meaning there. So use class="myinputs".

Then your selector needs to use . to find them, not #, which is for selecting by ID.

Once you've done this you can use .each() to loop over them and concatenate the values

$("#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">

rhbvkleef · Accepted Answer · 2018-02-10 22:12:51Z

Few Pointers:

Do not use [] in your class attributes.
Use . to use class as a selector.
You will need to traverse the input elements to get their value.

$("#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>

Eddie · Accepted Answer · 2018-02-10 06:08:14Z

1

You can loop using .each(), get the value and store/push it in a array variable. You can join the array using join()

You also have to rename your class as myinputs without []

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

answered Feb 10, 2018 at 6:08

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

3 Comments

user9341437 Over a year ago

Thank You So Much.!

Eddie Over a year ago

Happy to help :)

Kos Over a year ago

An .each() that just appends each value to an array can be replaced with map() to make the code simpler.

xianshenglu · Accepted Answer · 2018-02-10 06:22:24Z

0

this gonna work and easy:

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

or

$(".myinputs").toArray().reduce(function(re,ele){return re+ele.value;},'')

edited Feb 10, 2018 at 6:22

answered Feb 10, 2018 at 6:12

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

2 Comments

user9341437 Over a year ago

Is this support in Jquery Version 1.0

xianshenglu Over a year ago

actually , this primarily used pure js ,you can test it.first code used ES6 and second used ES5

Collectives™ on Stack Overflow

Combine Array From Html To Jquery

5 Answers 5

4 Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related