Solved

Form Validation - checkboxes with corresponding text boxes to sort

Posted on 2014-10-21
16
159 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now