Need Help - Checking Select Checkbox 2

[cfinitialize]

I've searched google and this forum to find an answer but no luck at all... partly, maybe because I don't know how to word the search correctly.

Essentially, here's what I'm trying to accomplish: I have a form with dynamic names and data for each input - I have the Check All/Uncheck All javascript working. What I want to accomplish is to check select checkbox based on the type of appStatus. Here's part of the code:



<cfform name="appReqLine" action="appLtr.cfm" method="post">
<cfset total_records = qryJOBREQ.RecordCount>
<cfloop index="Counter" from="1" to="#total_records#">

/* the checkbox input
<cfinput name="applicantID" type="checkbox" onClick="chglnk('chktd',this.form)" value="#Counter#" checked="no" >

<cfinput type="hidden" name="appID_#Counter#" value="#Trim(appDetail[Counter][1])#" />
<cfinput type="hidden" name="reqID_#Counter#" value="#Trim(appDetail[Counter][11])#" />
<cfinput type="hidden" name="reqDesc_#Counter#" value="#Trim(appDetail[Counter][12])#" />
<cfinput type="hidden" name="namePrefix_#Counter#" value="#Trim(appDetail[Counter][2])#" />
<cfinput type="hidden" name="firstName_#Counter#" value="#Trim(appDetail[Counter][4])#" />
<cfinput type="hidden" name="lastName_#Counter#" value="#Trim(appDetail[Counter][3])#" />
<cfinput type="hidden" name="addr1_#Counter#" value="#Trim(appDetail[Counter][5])# #Trim(appDetail[Counter][6])#" />
<cfinput type="hidden" name="addr2_#Counter#" value="#Trim(appDetail[Counter][7])#, #Trim(appDetail[Counter][8])# #Trim(appDetail[Counter][9])#" />
<cfinput type="hidden" name="reDate_#Counter#" value="#DateFormat(appDetail[Counter][13], 'mm/dd/yyyy')#" />
<cfinput type="hidden" name="dateApp_#Counter#" value="#DateFormat(appDetail[Counter][14], 'mm/dd/yyyy')#" />


/* this input is what I'm trying to use to determine which checkbox need to be checked... (ie. Check all checkbox where status == 'NQ')

<cfinput type="hidden" name="appStatus_#Counter#" value="#Trim(appDetail[Counter][10])#" />

</cfloop>

</cfform>




// query output

--------------------------------------------------------------------------------

PRINT NAME HISTORY STATUS DATE

105 HILL, . JPRT HISTORY AI 02/19/2008

104 KRINGLE, . KRIS HISTORY DM 02/19/2008

103 DOE, MR. THOMAS HISTORY NQ 02/19/2008

107 DOE, MR. JOHN HISTORY NQ 02/25/2008

100 TESTING, MS. MARIA HISTORY FY 02/19/2008

I hope that make sense? I'm just really stomped, specially that the name of the input is dynamic.

 

[cfinitialize]

here's the finished code. now i just to duplicate it for each of the appstatus values... unless that too can be "variable-ize"?


var cond = 0;
function lnkChkNQ(tdid,frmname) {
frmobj = document.forms[frmname];
elmlen=frmobj.length;
var appIndex = 1;
var elemID = 'applicantID';
for(i=0;i<elmlen;i++) {
if(document.getElementById(elemID).type=="checkbox"&&frmobj.elements.name.indexOf(elemID)==0) {
var appID = 'applicantID_' + (appIndex);

var getApplicantID = document.getElementById(appID).value;

var prefix = 'appStatus_' + (appIndex);
var appName = document.getElementById(prefix).name;
var appValue = document.getElementById(prefix).value;

var hiddenvalue = appName;
var appstatvalue = hiddenvalue.replace(appName, (appIndex));

if (document.getElementById(appID).type=="checkbox"&&getApplicantID==appstatvalue&&appValue=='NQ') {
if(document.getElementById(appID).checked==false){
document.getElementById(appID).checked=true; }
else{
document.getElementById(appID).checked=false; }
} //end if

appIndex = appIndex +1;

} //end if

} //end for

} //end function

 

[cfinitialize]

got it.

here's how the js link is setup:
<a href="javascript:lnkChkNQ('#Trim(appDetail[Counter][10])#','appReqLine')">#Trim(appDetail[Counter][10])#</a>

and here's the final js code:
// JavaScript Document

var cond = 0;
function lnkChk(tdid,frmname) {
frmobj = document.forms[frmname];
elmlen=frmobj.length;
var appIndex = 1;
var elemID = 'applicantID';
for(i=0;i<elmlen;i++) {
if(document.getElementById(elemID).type=="checkbox"&&frmobj.elements.name.indexOf(elemID)==0) {
var appID = 'applicantID_' + (appIndex);

var getApplicantID = document.getElementById(appID).value;

var prefix = 'appStatus_' + (appIndex);
var appName = document.getElementById(prefix).name;
var appValue = document.getElementById(prefix).value;

var hiddenvalue = appName;
var appstatvalue = hiddenvalue.replace(appName, (appIndex));

if (document.getElementById(appID).type=="checkbox"&&getApplicantID==appstatvalue&&appValue==tdid) {
if(document.getElementById(appID).checked==false){
document.getElementById(appID).checked=true; }
else{
document.getElementById(appID).checked=false; }
} //end if

appIndex = appIndex +1;

} //end if

} //end for

} //end function



Thank you so very much for walking me through it and pushing me to do and think. I learned quite a bit!

 

[kaht]

cfinitialize, thanks for sticking with it. I hope that you learned a lot about javascript in the process.

About "variable-izing" the function, it's easy - just pass the string you want to check for to the function as an extra parameter.

On a side note, you can post your code between [ignore]

[/ignore] tags to make it easier to read.

I've also made a lot of modifications to your code to make it simpler to read and debug. Another thing - you declare each of your variables with a preceding [!]var[/!] in the for loop - that means that it is essentially preparing a new spot in memory for that variable after each pass through the loop. You should declare it with [!]var[/!] outside the loop, and then reference the variables w/o [!]var[/!] when inside the loop - that way it just rewrites the value of the old variable instead of creating a new space in memory for the variable each time. I highlighted all the things I changed in red, and passing the parameter to the function in purple. Basically, if you only want to change your code to accept a parameter in the place of "NQ", then just change the purple parts. You just have to make sure that when you call this function that you pass it the extra parameter.

function lnkChkNQ(tdid, frmname[!][purple], appValueToCheckFor[/purple][/!]) {
   frmobj = document.forms[frmname];
   elmlen = frmobj.length;
   var appIndex = 1;
   var elemID = 'applicantID';
   [!]var getApplicantID, appID, appElement, appIDElement, prefix;[/!]
   [!]var appName, appValue, hiddenValue, appstatvalue;[/!]
   for([!]var[/!] i = 0; i < elmlen; i++) {
      if (document.getElementById(elemID).type == "checkbox" && frmobj.elements[i].name.indexOf(elemID) == 0) {
         appID = 'applicantID_' + appIndex;
         getApplicantID = document.getElementById(appID).value;
         prefix = 'appStatus_' + appIndex;
         [!]appElement = document.getElementById(prefix);[/!]
         [!]appIDElement = document.getElementById(appID);[/!]
         appName = [!]appElement[/!].name;
         appValue = [!]appElement[/!].value;
         hiddenvalue = appName;
         appstatvalue = hiddenvalue.replace(appName, (appIndex));
         if ([!]appIDElement[/!].type == "checkbox" && getApplicantID == appstatvalue && appValue == [!][purple]appValueToCheckFor[/purple][/!]) {
            [!]appIDElement[/!].checked = [!]!appIDElement[/!].checked;
         } //end if
         [!]appIndex++;[/!]
      } //end if
   } //end for
} //end function

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[kaht]

Well... took me a long time to write that reply, so I missed the one you've put in the meantime. Glad you got it working.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[cfinitialize]

thank you. i sure did learn quite a bit. i really like your code, it's a lot easier to read - very efficient. i've always been weak at creating codes as such. i will eventually get what i want, but most likely it's not as clean and not as efficient as others' solution.

 

[cfinitialize]

one last question... i know what it does, but how does it do it?

appIDElement.checked = !appIDElement.checked;

 

[kaht]

! is the "not" operator in javascript.

!true == false
!false == true

so, we set the checked attribute of the checkbox equal to the "not" equivalent of it's prior state. So, it checks the value of appIDElement.checked - if it's true, the ! changes it to false, and then we assign that value back to the checked status of the element.

Type this into a new html page to observe what happens:

<script type="text/javascript">
alert(true);
alert(!true);
</script>

Basically, since we know we're just wanting to flip-flop the checked status, there's no need to type out the long if/else block - we can do it in one simple statement

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[cfinitialize]

really nifty. i like it.

thank you very much!

 

[j4606]

! is the "not" operator in javascript.

!true == false
!false == true

so, we set the checked attribute of the checkbox equal to the "not" equivalent of it's prior state. So, it checks the value of appIDElement.checked - if it's true, the ! changes it to false, and then we assign that value back to the checked status of the element.

I didn't know this. Good stuff. Kinda fun to see how i can use it alert(!!!true)..

BTW 47 replies wow.

 

[cfinitialize]

i'm new to javascript, so i had plenty of questions. google can't answer all of it :]]