javascript question

So you need people to choose a different number in each select? But what if they've set all 15, but then want to change one. All the other values would be somehow disabled so you couldn't choose another value in the select box. How about this: you can select a value that's already selected but if you do then any other select boxes set to that value (therecould only be a maximum of 1) become set to nothing and you have to reset them..?   _____ Sent: Tuesday, 17 August 2004 11:01 a.m. To: CF-Talk Subject: ot: javascript question hello good peoples... i have a javascript question, that really aims for a coupla things... 1. can this be done elegantly? 2. if not, then whats the best non-elegant way? 3. if so, a bit of a point in the right direction...i can READ javascript, most of the time, and tell ya whats going on...however, i SUCK, with a capital freakin' S at writing it...anyway, im sick of bugging mike t. all the time with my javascript questions...so i figured i try here, and im sure he'll read this...but whatever, :) anyway... i have, lets say... 1. 15 select elements on a page.   2. each is named uniquely. 3. all are filled with 1-15 as the values (indexes 0-14) 4. if a user chooses, 14 in element 1 (index 0) i need to prevent them from choosing 14 in ANY other element. i (think) i can do it with something sort of LONG and VERY unelegant inline onChange="if (this.selectedIndex==0){2.something.Whatever};" onChange() event, but i think there has to be a BETTER way to do it. id love to learn this, is there a place to get this kind of javascript learning?  ive picked up EVERY thing i can about a lot of web programming languages, just cant crack the javascript code... help ??? :) cheers. -- tony Tony Weeg human. email: tonyweeg [at] gmail [dot] com blog: http://www.revolutionwebdesign.com/blog/ Check out http://www.antiwrap.com to send websites to your friends.   _____  

matt. great idea...that makes sense since i have to allow them to swap. now, coupled with adrian lynch's idea, will that work? tw ----- Excess quoted text cut - see Original Post for more -----

Here's a question for ya. Is this for some sort of ordering? Do you need to order 15 things, hence the need to make sure all fifteen are different? Ade matt. great idea...that makes sense since i have to allow them to swap. now, coupled with adrian lynch's idea, will that work? tw > So you need people to choose a different number in each select? But what if > they've set all 15, but then want to change one. All the other values would > be somehow disabled so you couldn't choose another value in the select box. > > How about this: you can select a value that's already selected but if you do > then any other select boxes set to that value (therecould only be a maximum ----- Excess quoted text cut - see Original Post for more ----- inline ----- Excess quoted text cut - see Original Post for more -----

its for a football pool that im building, and if there are 15 games in a weekend you can only assign 1-15, well 15 times :)  make sense?  its almost football season (well..american football season) and this is for our pool, im building a site to manage it now... tw ----- Excess quoted text cut - see Original Post for more -----

not 15 times, but one number 1-15 each. game 1 point value 15 game 2 point value 12 game 3 point value 11 etc.. until all are used... ive got EVERYTHING done on the site, except you can pick a value more than once, and that aint good...people wont pay attention to what they've used, and it will take them time to figure out which numbers they have used...so im trying to help that experience.  i currently flag duplicates on a refresh of the page so they know what to fix...jsut would be easier if it told them.... make sense? tw ----- Excess quoted text cut - see Original Post for more -----

Hey Tony -- Gonna' Share the app? Stealers will have a good year, but Detroit may be a surprise (Ram fan from 1951-2004) Dick On Aug 16, 2004, at 4:36 PM, Tony Weeg wrote: ----- Excess quoted text cut - see Original Post for more -----

As an overview, in the onChange call a function that loops through all the other selects and checks their selected values/indexes(which ever makes more sense) elements = new Array(   getElementById('select_1'),   getElementById('select_2'),   getElementById('select_3'),   getElementById('select_4'),   ...   ... ); Then a function that you call with onChange of all those selects. for (....) {   if elements.selected index/value = the current selected index/value {     alert("something");   } } Hows about that? Ade hello good peoples... i have a javascript question, that really aims for a coupla things... 1. can this be done elegantly? 2. if not, then whats the best non-elegant way? 3. if so, a bit of a point in the right direction...i can READ javascript, most of the time, and tell ya whats going on...however, i SUCK, with a capital freakin' S at writing it...anyway, im sick of bugging mike t. all the time with my javascript questions...so i figured i try here, and im sure he'll read this...but whatever, :) anyway... i have, lets say... 1. 15 select elements on a page. 2. each is named uniquely. 3. all are filled with 1-15 as the values (indexes 0-14) 4. if a user chooses, 14 in element 1 (index 0) i need to prevent them from choosing 14 in ANY other element. i (think) i can do it with something sort of LONG and VERY unelegant inline onChange="if (this.selectedIndex==0){2.something.Whatever};" onChange() event, but i think there has to be a BETTER way to do it. id love to learn this, is there a place to get this kind of javascript learning?  ive picked up EVERY thing i can about a lot of web programming languages, just cant crack the javascript code... help ??? :) cheers. -- tony Tony Weeg human. email: tonyweeg [at] gmail [dot] com blog: http://www.revolutionwebdesign.com/blog/ Check out http://www.antiwrap.com to send websites to your friends.

adrian... thank you, now, how can i marry that with matt's idea? tw ----- Excess quoted text cut - see Original Post for more -----

Yup, sorry, my code wasn't too hot. // Get references to the selects elements = new Array(   getElementById('select_1'),   getElementById('select_2'),   getElementById('select_3'),   getElementById('select_4'),   ...   ... ); function myOnChange() {   for (...) {     if ( elements[i].options[elements[i].selectedIndex].value == this.options[this.selectedIndex].value ) {       elements[i].selectedIndex = 0; // Set the other select back to the top option     }   } } Didn't test that, does it work? Ade adrian... thank you, now, how can i marry that with matt's idea? tw > As an overview, in the onChange call a function that loops through all the > other selects and checks their selected values/indexes(which ever makes more ----- Excess quoted text cut - see Original Post for more ----- { ----- Excess quoted text cut - see Original Post for more ----- inline ----- Excess quoted text cut - see Original Post for more -----

its lookiung like it makes sense!!! good. ok, the for (...) { part needs to know how many too loop through, right? ok, how the heck can cf tell the javascript, how many times to loop, that variable will be available in a cfquery.recordCount, which is, i supps how ill build the elements array() right? tw ----- Excess quoted text cut - see Original Post for more -----

Ermmm, yup, I think. You can dynamically build the elements array and either do...   for ( var i = 0; i < elements.length ;++ ) {...} ... or...   for ( var i = 0; i < #query.RecordCount# ;++ ) {...} I'd go for the first one because I'm not keen on mixing CF and JS, but the second might be faster. Ade Can we be in this pool when it's done? :OD its lookiung like it makes sense!!! good. ok, the for (...) { part needs to know how many too loop through, right? ok, how the heck can cf tell the javascript, how many times to loop, that variable will be available in a cfquery.recordCount, which is, i supps how ill build the elements array() right? tw ----- Excess quoted text cut - see Original Post for more ----- == > this.options[this.selectedIndex].value ) { >                        elements[i].selectedIndex = 0; // Set the other select back to the top ----- Excess quoted text cut - see Original Post for more ----- the ----- Excess quoted text cut - see Original Post for more ----- index/value ----- Excess quoted text cut - see Original Post for more -----

somebody was asking today about some old code I wrote...i think it's what you're looking for too: http://charlie.griefer.com/code/js/megan.html Just replace pizza, beer, playboy channel, etc with football teams :) Adrian Lynch wrote: ----- Excess quoted text cut - see Original Post for more -----

"Just replace pizza, beer, playboy channel, etc with football teams" why would you ever do that!?!? :OD somebody was asking today about some old code I wrote...i think it's what you're looking for too: http://charlie.griefer.com/code/js/megan.html Just replace pizza, beer, playboy channel, etc with football teams :)

charlie... like they always say...if you had t*ts id kiss ya! thanks. perfect.  no need to make it any easier! wow, perfect, and it REPLACES the value with the other VALUE, PERFECT!!!! later. ----- Excess quoted text cut - see Original Post for more -----

ADE, Matt....thank you GENTS as well. this one from charlie is the money shot. later! tw ----- Excess quoted text cut - see Original Post for more -----

Tony You pledged yourself to me, on this very list, several months ago Pouting... Dick On Aug 16, 2004, at 5:10 PM, Tony Weeg wrote: > charlie... > >  like they always say...if you had t*ts id kiss ya! > >  thanks. perfect.  no need to make it any easier! >

pldged, pouting? what dost thou speaketh of... (pardon the stm, thc sometimes gets in the way ;) tw ----- Excess quoted text cut - see Original Post for more -----

i remember... http://www.antiwrap.com/?155 what a slut i am !!! damn. tw ----- Excess quoted text cut - see Original Post for more -----

On Aug 16, 2004, at 6:18 PM, Tony Weeg wrote: >  what a slut i am !!! damn. > > That's your appeal! Dick (contacting the lawyers as we speak)

ok, if you take this code, and run it in a browser, change the value of the first one to 10 and see you get two 9's any idea why??? im sooo close with this... thanks! tw <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; <html xmlns="http://www.w3.org/1999/xhtml">; <head>   <title>Untitled</title>   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />      <script type="text/javascript">     /* *******************************************************************************     In order for this to work, we need to maintain an array that represents the     form fields and values.            The array is declared outside of the function, with dimensions to represent     the field name, and original field value.            Within the function, as the values of each <select> change, the values of the     appropriate array positions will change as well, to constantly mimic the values     of the form fields.            We do this because we need to keep track of the original value of the form     field that was changed (e.g. if the field with '4' in it is changed to '2',     we need to know that the original value was '4').     ******************************************************************************* */          var posArray = [];     posArray[0] = new Array('bar_0', 1);     posArray[1] = new Array('bar_1', 2);     posArray[2] = new Array('bar_2', 3);     posArray[3] = new Array('bar_3', 4);     posArray[4] = new Array('bar_4', 5);     posArray[5] = new Array('bar_5', 6);     posArray[6] = new Array('bar_6', 7);     posArray[7] = new Array('bar_7', 8);     posArray[8] = new Array('bar_8', 9);     posArray[9] = new Array('bar_9', 10);         posArray[10] = new Array('bar_10', 11);                  function dobump(fld, val) {       var tmpVal;    // var to hold the original value that was changed       var tmpPos;    // var to determine which field was changed            // loop over the array (which must have the same # of elements as form fields)       for (var i=0; i<posArray.length; i++) {         // when we find the one that corresponds with the field that triggered the function...         if (posArray[i][0] == fld.name) {           tmpVal = posArray[i][1];  // set the tmpVal var           tmpPos = i;          // set the tmpPos var         }       }              // must loop again over the array       for (var i=0; i<posArray.length; i++) {         // we want to SKIP the field that triggered the function (so we use != (not equal))...         if (fld != document.foo.elements['bar_' + i]) {           if (val > tmpVal) {    // if the values are shifting DOWN...             // on the current field, if the value is greater than or equal to the tmpVal value             // AND less than the NEW value of the field that was changed             if ((document.foo.elements['bar_' + i].options[document.foo.elements['bar_' + i].selectedIndex].value >= tmpVal) && (document.foo.elements['bar_' + i].options[document.foo.elements['bar_' + i].selectedIndex].value <= val)) {               // increment the selectedIndex of the form field by one...               document.foo.elements['bar_' + i].selectedIndex--;               // ...and increment the value of the array position by one               posArray[i][1]--;             }           } else {      // if the values are shifting UP...             // on the current field, if the value is greater than or equal to the NEW value of the field that was changed             // AND less than the tmpVal value             if ((document.foo.elements['bar_' + i].options[document.foo.elements['bar_' + i].selectedIndex].value >= val) && (document.foo.elements['bar_' + i].options[document.foo.elements['bar_' + i].selectedIndex].value < tmpVal)) {               // increment the selectedIndex of the form field by one...               document.foo.elements['bar_' + i].selectedIndex++;               // ...and increment the value of the array position by one               posArray[i][1]++;             }           }         }       }              // to keep the array consistent with the form fields, must make one final adjustment to it...       // the value of the position representing the field that was changed has to be changed as well (to the new chosen value).       posArray[tmpPos][1] = val;     }   </script> </head> <body> Rating my Favorite Things :) <form name="foo"> <table> <tr>   <td>Third </td>   <td>     <select name="bar_0" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1" SELECTED>1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Fourth </td>   <td>     <select name="bar_1" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2" SELECTED>2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>First </td>   <td>     <select name="bar_2" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3" SELECTED>3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Fifth </td>   <td>     <select name="bar_3" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4" SELECTED>4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_4" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5" SELECTED>5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_5" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6" SELECTED>6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_6" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7" SELECTED>7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_7" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8" SELECTED>8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_8" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9" SELECTED>9</option>             <option value="10">10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_9" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10" SELECTED>10</option>                   <option value="11">11</option>                       </select>   </td> </tr> <tr>   <td>Second </td>   <td>     <select name="bar_10" onchange="dobump(this, this.options[this.selectedIndex].value);">       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>       <option value="7">7</option>       <option value="8">8</option>       <option value="9">9</option>             <option value="10">10</option>                   <option value="11" SELECTED>11</option>                       </select>   </td> </tr> </table> </form> </body> </html> -- tony Tony Weeg human. email: tonyweeg [at] gmail [dot] com blog: http://www.revolutionwebdesign.com/blog/ Check out http://www.antiwrap.com to send websites to your friends.

I may be missing something but I think you can do this much simpler. If you create your options up front - all 15 in a collection.  You can then loop over that collection 15 times to create your 15 select boxes. I've got a collection object available on my site with an example of how to do this (create a collection of options and then dump it out to a select box) here (you don't need this, but it makes managing the group of options very simple): http://www.depressedpress.com/depressedpress/Content/Development/JavaScript/ Extensions/ObCollectionOrdered/Index.cfm So - you've got one and one list of options, but it's repeated 15 times, right?  In other words you've got 15 objects and 15 references to each.  But you've only got 15 actual options on the whole page.  See how nice that is? Okay - now comes the fun part.  Remember that in JavaScript you can add properties to anything.  So when I select an option I can add a new property, say "Game" to the option.  Because all 15 of your select controls are showing the SAME OBJECTs the property will be available in all of them instantly.  Sweet, uh? Set up your options something like this: Op1 = new Option("1"); Op1.game = ""; You can then do an "onChange()" that just sets the "game" property of whatever option was chosen (again using the collection object makes getting the object reference easier). You can then do whatever you want.  You can easily check to see if the "game" property is set when you select an item from any box and throw an alert.  You could also repopulate all of the items each time a new one is selected removing those that are selected from the other lists and only showing the selected one in the list it was selected in. When it comes right down to it you should be able to do the core of what you want in only a few lines of code. Jim Davis

Yup, sorry, my code wasn't too hot. // Get references to the selects elements = new Array(   getElementById('select_1'),   getElementById('select_2'),   getElementById('select_3'),   getElementById('select_4'),   ...   ... ); function myOnChange() {   for (...) {     if ( elements[i].options[elements[i].selectedIndex].value == this.options[this.selectedIndex].value ) {       elements[i].selectedIndex = 0; // Set the other select back to the top option     }   } } Didn't test that, does it work? Ade adrian... thank you, now, how can i marry that with matt's idea? tw

Yeah I think so. Instead of an alert you just change the selectedIndex to 0 ( getElementById('select_4').selectedIndex = 0 ). But you'd have to have the first option in the select box a null value, i.e. <option value="">> choose <</value> Or something like that.   _____ Sent: Tuesday, 17 August 2004 11:21 a.m. To: CF-Talk Subject: Re: javascript question matt. great idea...that makes sense since i have to allow them to swap. now, coupled with adrian lynch's idea, will that work? tw > So you need people to choose a different number in each select? But what if > they've set all 15, but then want to change one. All the other values would > be somehow disabled so you couldn't choose another value in the select box. > > How about this: you can select a value that's already selected but if you do > then any other select boxes set to that value (therecould only be a maximum ----- Excess quoted text cut - see Original Post for more ----- inline ----- Excess quoted text cut - see Original Post for more -----   _____  

Third example down may be of interest http://www.mattkruse.com/javascript/selectbox/   _____ Sent: Tuesday, 17 August 2004 11:30 a.m. To: CF-Talk Subject: RE: javascript question Here's a question for ya. Is this for some sort of ordering? Do you need to order 15 things, hence the need to make sure all fifteen are different? Ade matt. great idea...that makes sense since i have to allow them to swap. now, coupled with adrian lynch's idea, will that work? tw > So you need people to choose a different number in each select? But what if > they've set all 15, but then want to change one. All the other values would > be somehow disabled so you couldn't choose another value in the select box. > > How about this: you can select a value that's already selected but if you do > then any other select boxes set to that value (therecould only be a maximum ----- Excess quoted text cut - see Original Post for more ----- inline ----- Excess quoted text cut - see Original Post for more -----   _____  

Yup, I've used something like those. Nice and easy to use. Or how about a nice drag and drop flash movie, not as hard as you'd think :OD Ade Third example down may be of interest http://www.mattkruse.com/javascript/selectbox/   _____ Sent: Tuesday, 17 August 2004 11:30 a.m. To: CF-Talk Subject: RE: javascript question Here's a question for ya. Is this for some sort of ordering? Do you need to order 15 things, hence the need to make sure all fifteen are different? Ade matt. great idea...that makes sense since i have to allow them to swap. now, coupled with adrian lynch's idea, will that work? tw > So you need people to choose a different number in each select? But what if > they've set all 15, but then want to change one. All the other values would > be somehow disabled so you couldn't choose another value in the select box. > > How about this: you can select a value that's already selected but if you do > then any other select boxes set to that value (therecould only be a maximum ----- Excess quoted text cut - see Original Post for more ----- inline ----- Excess quoted text cut - see Original Post for more -----   _____