Using Jquery to total input values of all questions with a specific "tag" in a foreach loop.

@seaniz if you've got access to the data in php why not do the 'totaling up' before you pass it to the blade?

Thanks for replying @automica!

I don't exactly have that surveys data in my model when the user is doing the survey... I'm sorta calculating the inputs on the spot and outputting the next for the user. It's a multistep form basically. Sorry if I understood what you said wrongly. :(

EDIT: Hmm if you're referring to my Survey.php, then that's where I store my questions... I'm looping all the questions out and they have their own tags. I dunno if there's a way to total up the questions based on their tags because my radio button inputs doesn't include the "tag". Maybe there's a way to do so. Here's a sample of my radio button btw, I have 7 identical ones for each questions with different "value".

<input 
    type="radio"
    name="responses[{{ $question->id }}][answer_id]"
    value="7" 
    id="answer_{{$question->id}}"
    class="w-14 h-14 border-3 mx-2 choice">

Hmm while typing this, I think might have just thought of something... What if I add {{ $question->tag }} into the class of the for each div?

<section id="choices_array" class="class">
    
@foreach($class as $question)
    <div class="question border-gray-400 pt-8 pb-2 mx-auto w-3/5 inactive {{$loop->first ? '':'border-t'}} {{$loop->last ? '':'border-b'}} {{ $question->tag }}">
        <div class="flex justify-center text-2hxl text-gray-700 font-medium pb-6">
            <span class="text-center w-3/5">{{ $question->question }}</span>
        </div>
        
        <div class="pb-6 choices">
            @include('survey.partials.mediumbuttons')
        </div>

        <input type="hidden" name="responses[{{ $question->id }}][question_id]" value="{{ $question->id }}">

        <input type="hidden" name="responses[{{ $question->id }}][question_tag]" value="{{ $question->tag }}">

        <input type="hidden" name="responses[{{ $question->id }}][question_category]" value="{{ $question->category }}">
    </div>
@endforeach

</section>

So now I can reference it like this in Jquery: $('.food').

@seaniz ah. that makes sense.

Sounds like quite a complicated bit of jquery here, especially as you storing the data in multiple hidden inputs.

would you be able to make selecting the question_tag hidden fields a bit easier by giving them a class to help select them?

eg

        <input type="hidden" class='question_tag' name="responses[{{ $question->id }}][question_tag]" value="{{ $question->tag }}">

and then you can add them by

let food = 0;
$('.question_tag').each(function (index) {
    if ($(this).value === 'food') {
        food++; // or whatever your corresponding field that holds answer value 
    }
});

Thanks @automica for your suggestion. :)

Hmm nice, so basically I can sorta do something like this?

        <div class="pb-6 choices {{ $question->tag }}">
            @include('survey.partials.radiobuttons')
        </div>

So that I can do this something like this? Not sure if I got my Jquery right, haha.

let var food = 0;
$('.food').each(function (index) {
    $(this).find('input').each(function(){
	food += Number($(this).val());
        });
});

@seaniz yeah. should work.

BTW you don't need let & var. Just use let (its more modern)

you may want to be more specific with the filter on

.find('input')

as that will try and add every input even those that are type=hidden

Sweet, thanks for the tip, @automica. :) Hmm how do I make it more specific, would it be: .find('.food', 'input')?

But yeah would like to just add the values of the radio buttons...