Jc Balantakbo Jc Balantakbo - 5 months ago 21
HTML Question

How do I group input elements of the same class that are sibling of a parent div?

The rendered html in my cshtml file.

<div>
<div>
<input class="Question" datafield="1" type="text" /> //question 1
</div>
<div>
<input class="Question" datafield="2" type="checkbox" />//question 2
<input class="Question" datafield="2" type="text" /> //question 2
</div>
<div>
<input class="Question" datafield="3" type="radio" /> //question 3
<input class="Question" datafield="3" type="radio" /> //question 3
<input class="Question" datafield="3" type="radio" /> //question 3
</div>
<div>
<select datafield="4" class="Question"> //question 4
<option val='sample1'>text1</option>
<option val='sample2'>text2</option>
</select>
</div>
</div>


The reason i am using class is because there is a varying number of questions as I am looping through questions stored in the database. The thing is some questions have multiple answer and some questions are single line answers.

I want to be able to be able to group these element's value as answers to their respective questions. I have manage to add a datafield property to distinguish 1 group from another.

Currently I have this in my javascript.

var question = [];
var questions = $('.Question');
$.each(questions, function (i, element) {
});


The problem is I can't think of an if condition in the $.each to group the elements into the arrays.

Desired output

var x = [datafield1:{input elements with datafield=1}, datafield2:{input elements with datafield=2}, datafield3:{input elements with datafield=3}, datafield4:{input elements with datafield=4}, .. ]


hopefully an array which i could loop through for validation

for(...)
{
for()
{
if(x[.][.]=='' || undefined)
return false;
}
}


note:
the number of question varies

Answer Source

Let's maintain the field value in the elements in a proper data attribute.

<input class="Question" data-field="1" type="text" />  //question 1

You can then do this in your for-loop, adding properties with a name that can be traced back to your question ids to an object (here named groupedData) :

var groupedData = {};
 
var questions = $('.Question');

$.each(questions, function (i, elem) {
   var questionId = $(elem).data("field");
   if(!groupedData.hasOwnProperty(questionId))
      groupedData[questionId] = [];

   groupedData[questionId].push($(elem).val()); //or whatever information you want to keep per-question.

});

console.log(groupedData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <input class="Question" data-field="1" type="text" />
    </div>
    <div>
        <input class="Question" data-field="2" type="checkbox" />
        <input class="Question" data-field="2" type="text" />     
    </div>
    <div>
        <input class="Question" data-field="3" type="radio" />
        <input class="Question" data-field="3" type="radio" />
        <input class="Question" data-field="3" type="radio" />
    </div>
    <div>
        <select data-field="4" class="Question">
          <option val='sample1'>text1</option>   
          <option val='sample2'>text2</option>   
        </select>
    </div>
</div>