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#counter1#').checked == true) {
                 document.getElementById('sort#counter1#').value = totalChecked;
         }else {
                document.getElementById('sort#counter1#').value = '';
         }
}

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
LVL 1
MaxwellTurnerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Why not fire this everytime someone clicks a checkbox:

totalChecked = 0;
for (var i = 0; i < chkBoxCount; i++) { 
           if (eval("itemno[" + i + "].checked") == true) {
           totalChecked++; 
           }
          if (document.getElementById('item#counter1#').checked == true) {
                  document.getElementById('sort#counter1#').value = totalChecked;
          }else {
                 document.getElementById('sort#counter1#').value = '';
          }
 }

Open in new window

0
GaryCommented:
Here's a mockup using Jquery

http://jsfiddle.net/LnqLmszx/
0
MaxwellTurnerAuthor Commented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
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
0
GaryCommented:
0
MaxwellTurnerAuthor Commented:
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
0
MaxwellTurnerAuthor Commented:
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
0
GaryCommented:
0
MaxwellTurnerAuthor Commented:
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
0
GaryCommented:
Didn't think about that

Fixed
http://jsfiddle.net/LnqLmszx/4/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MaxwellTurnerAuthor Commented:
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
0
MaxwellTurnerAuthor Commented:
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:

$(this).css('border', function() {
			return '3px solid #0C0';
		});

Open in new window


When checked and:

$(this).css('border', function() {
			return '1px solid #0C0';
		});

Open in new window


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
0
GaryCommented:
That should be a seperate question as it has nothing to do with the original
0
MaxwellTurnerAuthor Commented:
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
0
MaxwellTurnerAuthor Commented:
Very helpful!  Thanks Gary!

Max
0
GaryCommented:
$(this).css('border', '3px solid #0C0');

Open in new window

Though you cannot really style a checkbox - it is as it is

Takes a little bit of learning to get to grips with the syntax.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.