0

enter image description here

I want to read all the selected values in vertical way. Example for monday(09/24/2018) I have to read all select box value that would be in 1st loop. Next for Tuesday(09/25/2018) I have to read all select box value that would be in second loop.

<table class="myTable" id="rosterTable"> <col> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <th colspan="1" scope="colgroup">Roster & Leave Details</th> <th colspan="1" scope="colgroup">Monday</th> <th colspan="1" scope="colgroup">Tuesday</th> <th colspan="1" scope="colgroup">Wednesday</th> <th colspan="1" scope="colgroup">Thursday</th> <th colspan="1" scope="colgroup">Friday</th> <th colspan="1" scope="colgroup" bgcolor="#feb236"><font color="#feb236">Saturday</font></th> <th colspan="1" scope="colgroup" bgcolor="#feb236"><font color="#feb236">Sunday</font></th> </tr> <tr> <th scope="col">${employees.currentWeek}'th-Week</th> <c:forEach items="${employees.days}" var="days"> <th id="dateDay" class="dateDay" scope="col">${days}</th> </c:forEach> </tr> <tr> <th># Name</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> <th>IST / Leave Details</th> </tr> <c:forEach items="${employees.listEmployee}" var="employee"> <tr> <th id="empName" class="empName" scope="row">${employee.firstName}${employee.lastName}</th> <td class="selectedShiftValue" id="monday"><select class="monday"> <option value="NONE"> --SELECT--<option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="tuesday"><select class="tuesday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="wednesday"><select class="wednesday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="thursday"><select class="thursday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="friday"><select class="friday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="saturday"><select class="saturday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> <td class="selectedShiftValue" id="sunday"><select class="sunday"> <option value="NONE"> --SELECT--</option> <c:forEach items="${employees.roster}" var="roster"> <option value="">${roster.shiftId} / ${roster.shiftValue}</option> </c:forEach> </select></td> </tr> </c:forEach> </table>

The below code will take all employees in monday. For monday all the first select box values needs to pick. 

$('#rosterTable .dateDay').each(function() { alert($(this).html()); $('#rosterTable .empName').each(function() { alert($(this).html()); // here monday all select box values needs to fetch. }); });

Any idea to get select box value in vertical manner.

Finally I need a json in below format. 

{ "Object" : [ { "name":"GanesanSundareswaran", "date":"09/24/2018", "shiftDetails":" value selected from monday first select box towards the first name in the th section" }, { "name":"ArunRathesh", "date":"09/24/2018", "shiftDetails":" value selected from monday second select box towards the second name in the th section" }, { "name":"VishnuGopal", "date":"09/24/2018", "shiftDetails":" value selected from monday third select box towards the third name in the th section" } ]

}

The name of the employee will be getting from db dynamically.

Improve this question

1 Answer 1

Reset to default
0

Few problems first. ID's should never be repeated and you are doing that with id="monday" id="tuesday"... same with id="dateDay"

Not sure why you are using $('#rosterTable .dateDay').each(function() no need to loop those days since your <select>'s already have the class with the days.

Do this

var monday = []; var tuesday = []; $('.monday').each(function() { monday.push($(this).val()); } $('.tuesday').each(function() { tuesday.push($(this).val()); }

and so on, This will put each days data in a nice array for you. Then convert to JSON

var monday= JSON.stringify(monday); var tuesday = JSON.stringify(tuesday);

If you want to add a key/value to your array you will have specify on the select what the title of the value is so it knows how to label it. You can do something like this per select

<select class="monday" data-label="name"> <select class="monday" data-label="date"> <select class="monday" data-label="shiftDetails">

Then if you want to add the key/value to the array then do this

var monday = []; var tuesday = []; $('.monday').each(function() { var key = $(this).attr('data-label'); monday.push({key: $(this).val()}); } $('.tuesday').each(function() { var key = $(this).attr('data-label'); tuesday.push({key: $(this).val()}); }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I will clear my requirement. I need a Json format, that I have mentioned on question (edited recently) Please have a look. Any help will be really appreciated.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.