How to get the values of input fields of multiple classes using jquery

Question

My desired output for the below code should be:

a-b-c-d,e-f-g-h,i-j-k-l

Note the comma instead of - after d and h.

But the below code results in

a-b-c-d-e-f-g-h-i-j-k-l,a-b-c-d-e-f-g-h-i-j-k-l,a-b-c-d-e-f-g-h-i-j-k-l,

I tried searching across stack overflow, but did not came across this type of question. Could someone please help me, please do not mark this question as repititive.

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

  <p class='count'></p> 
 <p class='test'></p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $('.submit').click(function(){
        var count = $('.yes').length
        $('.count').text(count);
       
        var texts = "";
        var i = 0;
    while (i < count) {
        texts += $(".xyz").map(function() { return this.value; })
                                   .get().join('-') + ",";
        i++;
    }

    $('.test').text(texts);    

    });
    

</script>

T.J. Crowder · Accepted Answer · 2022-03-20 14:18:44Z

Loop through the .yes elements, building the array of their .xyz elements and joining it with -, then join the result with ,:

var texts = $(".yes").map(function() {
    return $(this).find(".xyz").map(function() {
        return this.value;
    }).get().join("-");
}).get().join(",");

Live Example:

$('.submit').click(function() {
    var count = $('.yes').length
    $('.count').text(count);
    
    var texts = $(".yes").map(function() {
        return $(this).find(".xyz").map(function() {
            return this.value;
        }).get().join("-");
    }).get().join(",");

    $('.test').text(texts);

});

// a-b-c-d,e-f-g-h,i-j-k-l

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 <p class='count'></p> 
 <p class='test'></p> 

<p style="font-weight: bold;" class="time text-center"></p>

More:

Noa Yarin Levi · Accepted Answer · 2022-03-20 14:15:41Z

0

It's happened because of your +=, which means it will append the result every iteration. My solution is to write only =.

<div class="test1 yes">
 <input type="text" class="xyz" value="a" />
 <input type="text" class="xyz"  value="b" />
 <input type="text" class="xyz" value="c" />
 <input type="text" class="xyz" value="d" />
</div>

<div class="test2 yes">
 <input type="text" class="xyz" value="e" />
 <input type="text" class="xyz" value="f" />
 <input type="text" class="xyz" value="g" />
 <input type="text" class="xyz" value="h" />
</div>

<div class="test3 yes">
 <input type="text" class="xyz" value="i" />
 <input type="text" class="xyz" value="j" />
 <input type="text" class="xyz" value="k" />
 <input type="text" class="xyz" value="l" />
</div>

<input type="submit" class='submit'>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 <p class='count'></p> 
 <p class='test'></p> 

<p style="font-weight: bold;" class="time text-center"></p>

<script>
    $('.submit').click(function(){
        var count = $('.yes').length
        $('.count').text(count);
       
        var texts = "";
        var i = 0;
    while (i < count) {
        texts = $(".xyz").map(function() { return this.value; })
                                   .get().join('-') + ",";
        i++;
    }

    $('.test').text(texts);    

    });
    

</script>

edited Mar 20, 2022 at 14:15

answered Mar 20, 2022 at 14:11

Noa Yarin Levi

1911 silver badge10 bronze badges

3 Comments

T.J. Crowder Over a year ago

Code dumps are not useful answers. To make the answer useful, say what you changed, and why.

Noa Yarin Levi Over a year ago

Yes, I explain that :)

vamshi g Over a year ago

your code is resulting in a-b-c-d-e-f-g-h-i-j-k-l, whereas what I need is a-b-c-d,e-f-g-h,i-j-k-l

ymz · Accepted Answer · 2022-03-20 14:18:20Z

0

Instead of

var texts = "";
var i = 0;
while (i < count) {
    texts += $(".xyz").map(function() { return this.value; })
                               .get().join('-') + ",";
    i++;
}

just write

var texts = ''
$('.yes').each(function() {
  textx += $(this).children('.xyz')
                  .map(function() { return this.value; })
                  .get().join('-') + ','
})

edited Mar 20, 2022 at 14:18

answered Mar 20, 2022 at 14:11

ymz

6,9641 gold badge26 silver badges41 bronze badges

1 Comment

vamshi g Over a year ago

This doesn't generate my desired output i.e a-b-c-d,e-f-g-h,i-j-k-l your code generates a-b-c-d-e-f-g-h-j-k-l

Collectives™ on Stack Overflow

How to get the values of input fields of multiple classes using jquery

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related