We Keep Coding

jQuery - checkboxes selecting all on a row or with similar names & ID's

Using jQuery 1.9.1 & getting XML returned from a query that needs to be displayed in a web page as shown in the picture below. I had asked a similar question several days ago but was all over the place in what I was asking. Hope to ask better questions this time.
For the items in the picture, the XML input would be:
<Classrooms>
<Room Number="3">
<Machine>310</Machine>
<Machine>320</Machine>
<Machine>340</Machine>
<Machine>350</Machine>
</Room>
<Room Number="8">
<Machine>810</Machine>
<Machine>820</Machine>
<Machine>840</Machine>
</Room>
<Room Number="10">
<Machine>1010</Machine>
<Machine>1020</Machine>
</Room>
</Classrooms>
The code below is a function that is called upon a successful AJAX GET and builds the checkboxes in a table on the web page.
var $roomList = $( items );
var roomListString = jQ_xmlDocToString( $roomList );
var roomListXML = $.parseXML(roomListString);
$(roomListXML).find("Row").each(function() {
var activeRooms = $( roomListXML ).find("Row").text();
var nbrRooms = $(activeRooms).find("Room").size();
$(activeRooms).find("Room").each(function() {
var roomNo = $(this).attr("Number");
var roomchk = "Room"+roomNo;
var $tr = $("<tr />");
$tr.append('<td><input type="checkbox" name="'+roomchk+'" id="'+roomchk+'" class="checkall" /><label for="'+roomchk+'">Room '+roomNo+'</td>');
$("#mytable").append( $tr );
$(this).children().each(function() {
var machID = $(this).text();
var idname = "Room"+roomNo+"Mach"+machID;
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" /><label for="'+idname+'">'+machID+'</td>');
$("#mytable").append( $tr );
});
});
});
When the above code is run on the data, the HTML in the table is as shown below.
<tbody>
<tr>
<td>
<input name="Room3" id="Room3" class="checkall" type="checkbox" />
<label for="Room3">Room 3</label>
</td>
<td>
<input name="Room3Mach310" id="Room3Mach310" type="checkbox" />
<label for="Room3Mach310">310</label>
</td>
<td>
<input name="Room3Mach320" id="Room3Mach320" type="checkbox" />
<label for="Room3Mach320">320</label>
</td>
<td>
<input name="Room3Mach340" id="Room3Mach340" type="checkbox" />
<label for="Room3Mach340">340</label>
</td>
<td>
<input name="Room3Mach350" id="Room3Mach350" type="checkbox" />
<label for="Room3Mach350">350</label>
</td>
</tr>
<tr>
<td>
<input name="Room8" id="Room8" class="checkall" type="checkbox" />
<label for="Room8">Room 8</label>
</td>
<td>
<input name="Room8Mach810" id="Room8Mach810" type="checkbox" />
<label for="Room8Mach810">810</label>
</td>
<td>
<input name="Room8Mach820" id="Room8Mach820" type="checkbox" />
<label for="Room8Mach820">820</label>
</td>
<td>
<input name="Room8Mach840" id="Room8Mach840" type="checkbox" />
<label for="Room8Mach840">840</label>
</td>
</tr>
<tr>
<td>
<input name="Room10" id="Room10" class="checkall" type="checkbox" />
<label for="Room10">Room 10</label>
</td>
<td>
<input name="Room10Mach1010" id="Room10Mach1010" type="checkbox" />
<label for="Room10Mach1010">1010</label>
</td>
<td>
<input name="Room10Mach1020" id="Room10Mach1020" type="checkbox" />
<label for="Room10Mach1020">1020</label>
</td>
</tr>
</tbody>
Selection of any checkbox on the page will enable a SUBMIT button on the page, which when clicked will pass the value of the boxes checked into another function. The user can select any number of the individual boxes (the ones with the number beside them), regardless of the room those items are associated with. When the user selects a Room checkbox though, ALL the individual checkboxes for that room should also be checked. The individual values are the ones I want. When the SUBMIT button is clicked, the individual values are all that will be sent to that function.
I had looked at this topic about using a checkbox class to select all.
I'm using the code below to find what's checked. I can see when I select an individual box that it gets added to the array. I can also see when I select a Room that the checkall is found, but I can't seem to make the individual checkboxes get checked once I do. I had been attempting to use the Attribute Starts With jQuery selector, but haven't been able to get it to check the boxes.
$("#mytable").click(function(e) {
var ele = $(this).find(":checkbox");
var zall = $(this).find(":checkbox.checkall:checked");
if (zall) {
var zname = $(zall).attr("name");
var selectallmachines = "input[name^='" + zname +"']:checked:enabled";
$( $(selectallmachines), "#mytable");
}
var arr = [];
$(":checkbox:checked").each(function(i) {
arr[i] = $(this).val();
});
});
I'm sure that it is something that I'm overlooking, but what am I missing? Would appreciate any suggestions or guidance on what I'm doing wrong, or if there's perhaps a better way to do what I'm doing.
Thanks!

You can do something like this
$('.checkall').change(function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
when .checkall is clicked/changes - set checked property on all inputs with an id that starts with the current clicked elements id
FIDDLE
Though you probably should delegate since you are using ajax to get the elements - this is assuming #mytable exists on DOM Ready - or replace with an ancestor element that does
$('#mytable').on('click','.checkall',function(){
$('input[id^='+this.id+']').prop('checked',this.checked);
});
another alternative is to give the checkall id as a class to the relative checkboxes
$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" class="'+roomchk+'"/><label for="'+idname+'">'+machID+'</td>');
then you can do
$('#mytable').on('click','.checkall',function(){
$('input.'+this.id).prop('checked',this.checked);
});
FIDDLE

Spring MVC map multiple dynamic form elements with the same name

I have a Spring MVC application and I am wondering how to successfully map multiple, dynamic form elements with the same name in my JSP page to my object class. For example:
In my locations.jsp page, I have multiple dropdown boxes:
<form id="tabs-3-form">
<input id="locations-1" name="location" />
<input id="locations-2" name="location" />
<input id="locations-3" name="location" />
... (more can be added or deleted dynamically by user)
</form>
I'm using jQuery to POST the form to my controller:
$("#tabs-3-form").submit(function() {
$.ajax({
type: 'POST',
url: '/searchResults',
data: $(this).serialize(),
dataType: 'json',
success: function(data) {
...
}
});
return false;
});
My LocationsController.java is set up as follows:
#RequestMapping(value = "/locationResults", method = RequestMethod.POST)
public #ResponseBody LocationsCollection locationsCollection
(
#ModelAttribute(value = "location") Location location,
BindingResult result
)
{
LocationsCollection locationsCollection = new LocationsCollection();
locationsCollection.addLocation(location);
// Anything else to do here?
return locationsCollection;
}
LocationsCollection.java just contains a List of Location objects.
Do I need to add brackets to the names of my input fields? Will MVC automatically do the mapping to a List, as it does with the other form elements? If anyone could provide an example, I'd appreciate it.

I was able to get it working by following the example from: http://lifeinide.blogspot.com/2010/12/dynamic-forms-lazylist-and-transparent.html?showComment=1355160197390#c6923871316812590644
I did make one adjustment, however. For the form names, I used:
<input name="locationList[0].locationName" />
instead of what the article suggests:
<input name="myFormObject.elements[0].property" />

I think you need to use brackets if you are using same name for form elements.
<c:forEach items="${expenseForm.expenseDetails}" varStatus="i">
<tr id="expenseDetail_${i.index}" class="lineItemsClass" lineNum="${i.index}">
<td><form:input path="expenseDetails[${i.index}].description" cssStyle="width: 200px;" /> <label style="color: red;"><form:errors path="expenseDetails[${i.index}].description" /></label></td>
<td><form:input path="expenseDetails[${i.index}].quantity" cssStyle="width: 60px;" readonly="true"/> <label style="color: red;"><form:errors path="expenseDetails[${i.index}].quantity" /></label></td>
<td><form:input path="expenseDetails[${i.index}].unitPrice" cssStyle="width: 60px;" readonly="true"/> <label style="color: red;"><form:errors path="expenseDetails[${i.index}].unitPrice" /></label></td>
<td><form:input path="expenseDetails[${i.index}].total" cssStyle="width: 60px;" /> <label style="color: red;"><form:errors path="expenseDetails[${i.index}].total" /></label></td>
</tr>
</c:forEach>
Here expenseDetails is the list in the modelAttribute class.
The path name will be used as html form name and it will be indexed based.
The above code segment is working fine for me.

jquery remove causes mvc3 post to fail

I have an HTML table with dynamically generated rows (using MVC3's EditorFor). Users fill in the data in the table (row by row), then submit the form to the server (via MVC3 HTML form). Users can delete a row by pushing a button that calls $(tableRow).remove() on the TR element, and then calls an async server method that removes the row from the database.
I've found that if I have say 5 rows in my table and I delete the third one then submit, the server method receives rows 1 and 2, but looses the other rows (the original 4th and 5th rows).
I've tried searching online as to why the postback would receive the first two rows and miss the last two, but all the answers I could find revolved around JQuery posts, which I'm not using.
Any help or direction would be great, please let me know if I need to clarify anything.
EDIT: adding code from my project that applies to the question. if you need more code for context, let me know and I'll add it.
//////////////// VIEW ////////////////
// model info and initialization logic
#using (Html.BeginForm("EditTimesheet", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data", id = "editTimesheet" }))
{
#Html.ValidationSummary(true)
<fieldset>
<table width="100%">
<tr>
<td colspan="14" align="right">
// lots of code
</td>
</tr>
#Html.EditorFor(m => m.Rows)
<tr>
<td colspan="14" align="right">
// lots of code
</td>
</tr>
// closing statements
//////////////// EditorFor ////////////////
// model info and initialization logic
<tr class="timesheet-row">
<td>
<a href='#'>
<img src='#Url.Content("~/Content/Images/delete.gif")'
width='17' height='17' style='border: 0;'
onclick="DeleteRow(this, #Model.RowId)" />
</a>
</td>
// other td's
</tr>
//////////////// JS file ////////////////
function DeleteRow(box, rowId)
{
$(box).closest(".timesheet-row").remove();
// HACK: despicable, detestable HACK!
var url = deleteRowUrl;
url += '?rowId=' + rowId;
var ajaxData = {
type: "POST",
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: null,
success: null,
error: function (error) {
alert("There was an error posting the data to the server: " + error.responseText);
}
};
$.ajax(ajaxData);
}

When you delete a row you are creating holes in the indexes of the names in the collection and the default model binder stops working because you no longer respect the expected format.
So instead of having the following sequential values:
<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[2].Id" value="3" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />
if you delete the third row with $(tableRow).remove() on the TR element you end up with:
<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />
See the problem?
Here's an article which illustrates how to solve this problem by using a custom helper called Html.BeginCollectionItem and which uses GUIDs in the names of the input fields for the collection instead of integer indexes. Also checkout Phil Haacks article about the syntax that the default model binder expects your fields to be named. There's a section towards the end which is called Non-Sequential Indices in which he covers how this could be done.

Sounds like part of your form is being deleted.
Inspect the DOM
find your form
delete a row and see what changes

Multiple checkbox value will show in textbox

Here is my code :
<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>
I'm trying that: if (more than one) checkbox is selected (or checked) that value will be assigned into the checkbox like "abcd" or "acd" or "bd".For that I have written jQuery
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
$("#text").val(("#check").val());
}
});
</script>
able to print one txtbox value at a time,but not able to put all checked value in the textbox at a time.
Where I am going wrong ??Any inputs will appreciated.

I may have not understood you correctly, but does this fiddle help you? http://jsfiddle.net/XwGJ9/1/
The change is the javascript:
var $textInput = $('#text');
var $checkBox = $('#checkboxes');
$('input').click(function(){
populateTextInput();
});
function populateTextInput () {
// empty text input
$textInput.val('');
// print out all checked inputs
$checkBox.find('input:checked').each(function() {
$textInput.val( $textInput.val() + $(this).val() );
});
}
Edit: updated

Use this code
$('.check').click(function(){
$("#text").val('');
$(".check").each(function(){
if($(this).prop('checked')){
$("#text").val($("#text").val()+$(this).val());
}
});
});​
​
With this HTML (use class instead of id for abcd)
<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>​
Also I encourage to use CSS instead of align="center"
See live, running demo

So I think you're wanting to append the values together in the textbox. In that case, do:
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
// Load the resulting value into new var textBoxVal.
$("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>
I used native JS just to make it clearer what I'm doing.

had used something like this.. might help you
var checkeditems = $('input:checkbox[name="check[]"]:checked')
.map(function() {
return $(this).val()
})
.get()
.join(",");
$("#text").val(checkeditems);

If you just want no multiples of a,b,c,d at one time, the onclick is per checkbox
var boxes = $("input:checkbox");
boxes.each(function(idx,elem){
elem.onclick=function(event){
var choices = "";
boxes.each(function(idx,elem){
choices += elem.checked ? elem.name:"";
});
$('#text').val(choices);
}
});

Create explanation(s) box for radio button form with jQuery

I'll use a simplified version below but am trying to build a form with simple yes/no questions. If the answer is no, no explanation is required. If the answer is yes, a new table row is inserted and textarea appears requiring an explanation for that particular question.
Of note, I use the jQuery validate plugin to make sure values are checked and plan to implement a required-dependency function for each field in the end.
My Form:
<form name="formtest" action="">
<table class="background_table">
<tbody>
<tr>
<td>Are you a man?</td>
<td>
<input type="radio" name="q1" id="yes1">Yes
<input type="radio" name="q1" id="no1">No
</td>
</tr>
<tr>
<td>Do you have hair?</td>
<td>
<input type="radio" name="q2" id="yes2">Yes
<input type="radio" name="q2" id="no2">No
</td>
</tr>
<tr>
<td>Do you have children?</td>
<td>
<input type="radio" name="q3" id="yes3">Yes
<input type="radio" name="q3" id="no3">No
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>
I believe my jQuery function would iterate through all fields (given my actual form has 20+ questions) using the .each() function and then run a test on the individual fields to see if the value was yes:checked. If it was a new row is insert after the field with a blank text area.
I am not quite sure what the best method for naming and identifying the text areas might be at this time. Ultimately, all text area answers could be combined into an array I suppose and broken out by an ID and value but not sure how I'd like to handle that quite yet.
jQuery function:
$(function() {
$('input').each( function() {
if( $('#yes1').is(':checked')) { //need to figure out how to find the yes value for each input
$('#yes1').closest('tr').after('<tr><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
}
});
$("#formtest").validate({
errorLabelContainer: "#form_error_message",
wrapper: "li",
rules: {
q1: 'required',
q2: 'required',
q3: 'required',
q4: 'required',
a1: { required: "yes1:checked" },
a2: { required: "yes2:checked" },
a3: { required: "yes3:checked" },
a4: { required: "yes4:checked" }
},
messages: {
//custom messages for all rules above
},
submitHandler: function() {
//Do processing
}
});
});
My function currently does not work but am looking for guidance as to how this can best be achieved. In the end it may just be easier to present a single text area for explanation of ANY checkbox is answered 'yes' at the end of the form but feel the initial method looks nicer and allows me to separate responses if I wanted.
final update
Of note, as part of a form, users have the ability to get back to this page. To prevent them having to retype answers and selections, I use PHP SESSION variables to contain previously entered data. I needed to make sure the explanation boxes showed or hid themselves as necessary. To prevent any issues with non-js browsers, I have all my explain boxes display initially then are set to hidden if the value of the corresponding checkbox is not equal to value of 1:
$(":radio:checked").each(function() {
if( $(this).val() != 1) {
$(this).closest('tr').next().hide();
}
});

It looks like you are only checking on the initial DOM load. You need to fire off a check on click events so that your box will appear/disappear on click. I would add a hidden tr row containing each comment box, and then either show or hide as appropriate. Something like this:
$('input:radio').click(function() {
$commentTr = $(this).closest('tr').next();
if ($(this).val() == 'Yes') {
$commentTr.hide();
}
else {
$commentTr.show();
}
});
On closer inspection, I suppose the check for a value of "Yes" wouldn't quite work. I'd recommend using HTML label tags with the "for" attribute populated with unique IDs of each input.
<input type="radio" name="q1" id="yes1"><label for="yes1">Yes</label>
Then you could have a check like:
$('label[for="' + id + '"'].html() == 'Yes'

I've set up a jsfiddle here which I think does what you're looking for.

There are a couple of things to consider with your current solution. First of all, as Danimal37 mentions, you are only running this on load of the page. You want the explanation boxes to show/hide whenever the value of each radio button change. Second of all, there is a built-in way to distinguish between the 'yes' and the 'no'. Just give the input elements value attributes. To fix these problems, I propose the following (I've ignored the validation portion and you can see it in action in this jsfiddle: http://jsfiddle.net/xonev/RU986/2/):
// The Javascript
$('input[value="1"]').change(function () {
var explainId = $(this).attr('name') + 'explain';
$(this).closest('tr').after('<tr id="' + explainId + '"><td colspan="2">Please explain below:<br><textarea name="a1" id="a1"></textarea></td></tr>');
});
$('input[value="0"]').change(function () {
var explainId = $(this).attr('name') + 'explain';
$(this).closest('tr').next('tr#' + explainId).remove();
});
<!-- The HTML -->
<form name="formtest" action="">
<table class="background_table">
<tbody>
<tr>
<td>Are you a man?</td>
<td>
<input type="radio" name="q1" id="yes1" value="1" />Yes
<input type="radio" name="q1" id="no1" value="0" />No
</td>
</tr>
<tr>
<td>Do you have hair?</td>
<td>
<input type="radio" name="q2" id="yes2" value="1" />Yes
<input type="radio" name="q2" id="no2" value="0" />No
</td>
</tr>
<tr>
<td>Do you have children?</td>
<td>
<input type="radio" name="q3" id="yes3" value="1" />Yes
<input type="radio" name="q3" id="no3" value="0" />No
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>