MaxwellTurner
asked on
Form Validation - checkboxes with corresponding text boxes to sort
I have a form with 20 checkboxes named 'item' with an id of 'itemX' where X is a number from 1-20. There are also 20 corresponding textboxes called 'sort' and corresponding id's. I am trying to create a system where the user selects 10 checkboxes in any order and the resulting list will be sorted in the order they were selected - I do this using the textboxes.
An example might be the easiest way to explain:
The user selects the third checkbox and the corresponding textbox becomes 1 ... they then select the tenth checkbox and the corresponding textbox becomes 2 ... the next checkbox selected becomes 3 and so on until 10 are selected and an alert notifies them that the max number has been reached. I end with 10 checkboxes selected and the 10 corresponding text boxes are populated with numbers from 1-10.
I populate the text boxes by using a javascript loop which checks the number of boxes that have been checked - triggered onclick of the checkbox (#counter1# is a coldfusion variable - this is within a coldfusion cfoutput):
for (var i = 0; i < chkBoxCount; i++) {
if (eval("itemno[" + i + "].checked") == true) {
totalChecked += 1;
}
if (document.getElementById(' item#count er1#').che cked == true) {
document.getElementById('s ort#counte r1#').valu e = totalChecked;
}else {
document.getElementById('s ort#counte r1#').valu e = '';
}
}
It works great, until someone unchecks a checkbox because they have changed their mind (which removes the number from the corresponding textbox). For example the checkbox with a corresponding number of 5 is unchecked which removes the 5 from the textbox. When a new checkbox is checked, I want the new textbox to display 5 to replace the one that was unchecked, but it dosen't ... it displays 'totalChecked' +1
This leads to my question ... I know I can loop through and count the number of checkboxes that are checked ... can I somehow loop through and find the missing number between 1-10 and populate the textbox with that missing number?
Hope this makes sense ... tougher to describe once I started typing ... lol
Max
An example might be the easiest way to explain:
The user selects the third checkbox and the corresponding textbox becomes 1 ... they then select the tenth checkbox and the corresponding textbox becomes 2 ... the next checkbox selected becomes 3 and so on until 10 are selected and an alert notifies them that the max number has been reached. I end with 10 checkboxes selected and the 10 corresponding text boxes are populated with numbers from 1-10.
I populate the text boxes by using a javascript loop which checks the number of boxes that have been checked - triggered onclick of the checkbox (#counter1# is a coldfusion variable - this is within a coldfusion cfoutput):
for (var i = 0; i < chkBoxCount; i++) {
if (eval("itemno[" + i + "].checked") == true) {
totalChecked += 1;
}
if (document.getElementById('
document.getElementById('s
}else {
document.getElementById('s
}
}
It works great, until someone unchecks a checkbox because they have changed their mind (which removes the number from the corresponding textbox). For example the checkbox with a corresponding number of 5 is unchecked which removes the 5 from the textbox. When a new checkbox is checked, I want the new textbox to display 5 to replace the one that was unchecked, but it dosen't ... it displays 'totalChecked' +1
This leads to my question ... I know I can loop through and count the number of checkboxes that are checked ... can I somehow loop through and find the missing number between 1-10 and populate the textbox with that missing number?
Hope this makes sense ... tougher to describe once I started typing ... lol
Max
ASKER
Thanks Gary,
I like the jquery and would like to use it more, but I don't know it very well. However, I applied your mockup but it still dosen't quite do what I need. I tried to tweak the code, but I can't figure it out. Works good when you are moving downward in the checkbox list, but if you choose a checkbox above ones you have already selected below, it basically just re-sorts the list from top to bottom, which is what I would have without any sort system.
I'd love to use JQuery and remove my cumbersom javascript. Is there a way ... for example if I check boxes 1,5 and 7 (which will have corresponding textbox values of 1,2,3) and then check box number 3 giving it's corresponding textbox value of 4. My javascript already does this, the tricky part is what to do when the user unchecks a box ... I need to find the lowest number (10 or less) that isn't already used in another textbox.
Also, can you apply CSS to forms with JQuery? I'm doing abit of border highlighting OnClick ...
Max
I like the jquery and would like to use it more, but I don't know it very well. However, I applied your mockup but it still dosen't quite do what I need. I tried to tweak the code, but I can't figure it out. Works good when you are moving downward in the checkbox list, but if you choose a checkbox above ones you have already selected below, it basically just re-sorts the list from top to bottom, which is what I would have without any sort system.
I'd love to use JQuery and remove my cumbersom javascript. Is there a way ... for example if I check boxes 1,5 and 7 (which will have corresponding textbox values of 1,2,3) and then check box number 3 giving it's corresponding textbox value of 4. My javascript already does this, the tricky part is what to do when the user unchecks a box ... I need to find the lowest number (10 or less) that isn't already used in another textbox.
Also, can you apply CSS to forms with JQuery? I'm doing abit of border highlighting OnClick ...
Max
Ok misunderstood you, will have a play around
Jquery is not hard to learn, if you already have a good foundation (or even a little knowledge) then using jquery is very easy to learn.
jQuery can also do all css styling - jquery is just javascript, so whatever you can do with javascript you can do with jquery just with a lot less hassle
Jquery is not hard to learn, if you already have a good foundation (or even a little knowledge) then using jquery is very easy to learn.
jQuery can also do all css styling - jquery is just javascript, so whatever you can do with javascript you can do with jquery just with a lot less hassle
ASKER
Man that is sooo close! I forgot to mention that this form can be edited, so the user may be viewing the page with 10 items already checked. I don't have a great understanding of javascript but I plug away and tweak at stuff until I get it working ... pretty basic knowledge though.
Abit more explanation:
This is a tool I'm building for our marketing dept. At the start of each month this form will be blank. They will select the top 10 items in the priority sort order they desire (so the best items appear at the top). During the month, they can go back and edit the form and change/remove/add items on the list if inventorys change or specials arise.
I've noticed two things:
1 - If I view the list with all 10 items already selected, and I uncheck one (eg. with a textbox number of 5) and check another, the sort number starts back at the number 1. Pretty sure it is because the myOrder array is currently blank. I tried changing the blank array to:
var myOrder = [$("#sort" + $(this).attr("id").replace ("item", "")).val()]; .... but that didn't work ... was really a shot in the dark. Can I pre-set this array if items are already selected?
2- From a completely blank (unchecked form) it works great! I can check and uncheck as I go and it works great. However if I select all 10 boxes, then uncheck a few, then ones I check after that get stuck at the value 2. I can see what is going on where your finding the lowest number, but cannot explain why this happens.
Thanks for your help! Hope I'm not being a picking pain in the butt!
Max
Abit more explanation:
This is a tool I'm building for our marketing dept. At the start of each month this form will be blank. They will select the top 10 items in the priority sort order they desire (so the best items appear at the top). During the month, they can go back and edit the form and change/remove/add items on the list if inventorys change or specials arise.
I've noticed two things:
1 - If I view the list with all 10 items already selected, and I uncheck one (eg. with a textbox number of 5) and check another, the sort number starts back at the number 1. Pretty sure it is because the myOrder array is currently blank. I tried changing the blank array to:
var myOrder = [$("#sort" + $(this).attr("id").replace
2- From a completely blank (unchecked form) it works great! I can check and uncheck as I go and it works great. However if I select all 10 boxes, then uncheck a few, then ones I check after that get stuck at the value 2. I can see what is going on where your finding the lowest number, but cannot explain why this happens.
Thanks for your help! Hope I'm not being a picking pain in the butt!
Max
ASKER
Okay, I figured out number 1 above. I changed the array to:
var myOrder = [1,2,3,4,5,6,7,8,9,10];
Max
var myOrder = [1,2,3,4,5,6,7,8,9,10];
Max
ASKER
I also figured out number 2 but can't figure out how to deal with it.
This line:
myOrder.sort();
ends up sorting the array as: 1,10,2,3,4,5,6,7,8,9 instead of 1,2,3,4,5,6,7,8,9,10
Any ideas why it is sorting like this?
Max
This line:
myOrder.sort();
ends up sorting the array as: 1,10,2,3,4,5,6,7,8,9 instead of 1,2,3,4,5,6,7,8,9,10
Any ideas why it is sorting like this?
Max
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Just figured it out! Changed the sort line to:
myOrder.sort(function(a, b){return a-b});
Oh, I see you just posted a new solution and it is abit different ... I will try your code as I just found the above on google and copy/pasted.
Thanks a billion!
Max
myOrder.sort(function(a, b){return a-b});
Oh, I see you just posted a new solution and it is abit different ... I will try your code as I just found the above on google and copy/pasted.
Thanks a billion!
Max
ASKER
One final question and I think I'm all set. I have been trying to apply css in the JQuery code only some success. Basically, I want the border of the checkbox and corresponding textbox highlighted when checked and the highlight removed when unchecked. So far I have managed to do this to the checkbox using:
When checked and:
when unchecked.
How do I apply that same css to the corresponding textbox? I tried replacing the 'this' above with:
"#sort" + $(this).attr("id") ... but didn't work.
Max
$(this).css('border', function() {
return '3px solid #0C0';
});
When checked and:
$(this).css('border', function() {
return '1px solid #0C0';
});
when unchecked.
How do I apply that same css to the corresponding textbox? I tried replacing the 'this' above with:
"#sort" + $(this).attr("id") ... but didn't work.
Max
That should be a seperate question as it has nothing to do with the original
ASKER
Fair enough. Thanks alot for your help, I learned alot about JQuery today, still a little confused with the syntax! I will try a little harder to try figure the css out, but if I can't get it look for a new question tomorrow.
Max
Max
ASKER
Very helpful! Thanks Gary!
Max
Max
$(this).css('border', '3px solid #0C0');
Though you cannot really style a checkbox - it is as it isTakes a little bit of learning to get to grips with the syntax.
Open in new window