CODEWITHSUNDEEP
javascriptjqueryhtml
user9341437
user9341437

Reputation:

Combine Array From Html To Jquery

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 ?

Upvotes: 6

Views: 1291

Answers (5)

void
void

Reputation: 36703

Few Pointers:

  1. Do not use [] in your class attributes.

  2. Use . to use class as a selector.

  3. 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>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

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>

Upvotes: 6

xianshenglu
xianshenglu

Reputation: 5329

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;},'')

Upvotes: 0

Barmar
Barmar

Reputation: 780974

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

Upvotes: 3

Eddie
Eddie

Reputation: 26844

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/

Upvotes: 1

Related Questions