Solved

Form Validation - checkboxes with corresponding text boxes to sort

Posted on 2014-10-21
16
164 Views
Last Modified: 2014-10-22
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
0
Comment
Question by:MaxwellTurner
  • 8
  • 8
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40395979
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
 
LVL 58

Expert Comment

by:Gary
ID: 40396010
Here's a mockup using Jquery

http://jsfiddle.net/LnqLmszx/
0
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40397974
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Expert Comment

by:Gary
ID: 40397988
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
 
LVL 58

Expert Comment

by:Gary
ID: 40398055
0
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40398141
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
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40398154
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
 
LVL 58

Expert Comment

by:Gary
ID: 40398159
0
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40398223
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40398229
Didn't think about that

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

Author Comment

by:MaxwellTurner
ID: 40398234
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
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40398278
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
 
LVL 58

Expert Comment

by:Gary
ID: 40398282
That should be a seperate question as it has nothing to do with the original
0
 
LVL 1

Author Comment

by:MaxwellTurner
ID: 40398291
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
 
LVL 1

Author Closing Comment

by:MaxwellTurner
ID: 40398293
Very helpful!  Thanks Gary!

Max
0
 
LVL 58

Expert Comment

by:Gary
ID: 40398297
$(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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question