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]

also, I never expected anyone to write it for me. if there was one already written, great! otherwise, I've always been willing to put forth the effort - but I needed some sort of direction - your 'pseudocode' had me started.

 

[cfinitialize]

for(i=1;i<elmlen;i++) {
var prefix = 'appStatus_' + i;
var appName = document.getElementById(prefix).name;

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

alert("the value is " + appstatvalue);
} //end for


"hiddenvalue" undefine?

 

[trollacious]

What is hiddenvalue? I used that as an example, so you have to use the correct variable name in your own code.

Lee

 

[cfinitialize]

i'm trying now to pull the value of applicantID - but I'm getting object required.

for(i=1;i<elmlen;i++) {
var prefix = 'appStatus_' + i;
var appName = document.getElementById(prefix).name;
var appValue = document.getElementById(prefix).value;
if(frmobj.elements.type=="checkbox"&&cond==0)
{ var getApplicantID = frmobj.elements.value;
alert("applicant id " + getApplicantID);
}


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

} //end for

 

[trollacious]

Why are you skipping the first element in the form by starting your for loop at 1?

What does Firefox's error console show you? Your code isn't doesn't have much to give me an idea what you're trying to do, or what you're working with. I'm pretty much ready to give up on this thread.

Lee

 

[cfinitialize]

okay...

this one will select all the "NQ" lines. but will not deselect.

var cond = 0;
function lnkChkNQ(tdid,frmname) {
frmobj = document.forms[frmname];
elmlen=frmobj.length
for(i=1;i<elmlen;i++) {

var appID = 'applicantID_' + i;
var getApplicantID = document.getElementById(appID).value;

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

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

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


if( cond == 0 ) {
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkNQ('chkNQ','appReqLine')\">NQ</a>"
cond=1
} //end if
else {
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkNQ('chkNQ','appReqLine')\">NQ</a>"
cond=0
} //end else
} //end function


The reason I'm starting the loop at 1 is because my CFArray counter starts at 1, otherwise it will always be 1 off between the counter and the javascript loop.

i don't use firefox - i use IE. the error only say "object required" - what object, I don't have any idea.

 

[trollacious]

Try it in Firefox and see what the error console tells you. That's MUCH better than the error help in IE.

Lee

 

[cfinitialize]

error - document.getElemetById(appID) has no properties

 

[trollacious]

Your argument that your CF array starts with 1 only means that you need to adjust for that when you navigate the loop. Javascript arrays start at 0 and go to array.length - 1. You're still skipping the first element in the form

for(i=[b][red]0[/red][/b];i<elmlen;i++) {
  var appID = 'applicantID_' + [b][red](i + 1)[/red][/b];
  [red]alert(appID);[/red]

You'll get several alerts, and the last one will tell you the element name you're missing.

Your example in your original post shows that NONE of your inputs use a number after applicantID, and you haven't shown anything to indicate you're doing something different.

Lee

 

[cfinitialize]

Lee,
I modified the input and added id="applicantID_#Counter#" - that's why I'm using getElementById.

however, I did make the loop change. The loop processed, but it never gave me any element name missing.

 

[cfinitialize]

wait... how do you edit posts here?

applicantID_8 is the element. it's 1 more than the actual elements.

 

[trollacious]

All your elements in the form are named applicantID_#, correct? If not, you're going to need to use a different index in the Javascript function just for those and filter them out from the other form elements that aren't included in that naming scheme.

Try something like this, using the separate variable for the index number:

var appIndex = 1;
elemID = 'applicantID_';
for(i=0;i<elmlen;i++) {
  if (frmobj.elements[i].name.indexOf(elemID) == 0) {
    var appID = elemID + appIndex;

    //all your other code here to work with these elements

    appIndex++;
  }

Unfortunately, you can't edit posts here.

Lee

 

[cfinitialize]

actually, only the checkbox elements are named applicantID_# - oh. I see what you're saying. let me try again.

 

[cfinitialize]

I don't understand what this line means or do?

frmobj.elements.name.indexOf(elemID) == 0

 

[trollacious]

frmobj.elements is the array of all the elements in frmobj, which you have your for loop going through. The name is the name of that particular element.

If the index (which always starts with zero in JS) in the element's value of the value in elemID is 0 (if the value starts with the value in elemID, then work with that element.

Clear as mud now? If you work backwards through that, you should get be able to get an idea of what it's doing.

Lee

 

[kaht]

cfinitialize, is there any way you can just do a view-source of the page and post the content here? Your problem can probably be solved in 10 mins or less that way. I'm about to go home for the evening, so if you post your view-source and Lee has not solved the problem, I will take a look at it tomorrow. You'll need to post the entire view-source, or just post a link to the page and that will accomplish the same thing.

-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]

 

[BillyRayPreachersSon]

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[cfinitialize]

yea, I didn't know what the indexOf does.

here's the page source.


<!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><script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Applicant Letter</title>
<link href="../style/form-style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../scripts/selectAll.js"></script>
<script type="text/javascript" src="../scripts/selectNQ.js"></script>

<script type="text/javascript" src="../scripts/letterWriter.js"></script>
<script type="text/javascript" src="../scripts/mouseover_tooltip.js"></script>

<style type="text/css">
<!--
.tooltiptitle{COLOR: #FFFFFF; TEXT-DECORATION: none; CURSOR: Default; font-family: Arial Narrow; font-weight: bold; font-size: 10pt}
.tooltipcontent{COLOR: #000000; TEXT-DECORATION: none; CURSOR: Default; font-family: Arial Narrow; font-size: 8pt; text-align: left}

#ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;}
-->
</style>

<script type="text/javascript">
<!--
_CF_checkappReqLine = function(_CF_this)
{
//reset on submit
_CF_error_exists = false;
_CF_error_messages = new Array();
_CF_error_fields = new Object();
_CF_FirstErrorField = null;


//display error messages and return success
if( _CF_error_exists )
{
if( _CF_error_messages.length > 0 )
{
// show alert() message
_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }

}
return false;
}else {
return true;
}
}
//-->
</script>
</head>

<body onload="" onmousemove="overhere()">

<div align="center">
<div id="div-content-main">
<div id="ToolTip"></div>




<table width="100%" cellpadding="0" cellspacing="2" border="0">
<thead>
<tr>
<td width="10%">
<img src="../images/logo_small.gif">
</td>
<td>
<div class="formHeaderName">
The Water Works and Sanitary Sewer Board <br>
of Montgomery, Alabama</div>
<div class="formHeaderAddress">
P.O. Box 1631, Montgomery, AL 36102-1631</div>
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border:double; border-style:double; height:4px; border-color:#000000;">

<div class="formSpacer">&nbsp;</div>
</td>
</tr>
</thead>
</table>

<table width="700px" border="1" cellspacing="0" cellpadding="3" frame="box" rules="none">
<thead>
<tr>

<td class="formFieldLabel" width="10%">
JOB ID:
</td>
<td class="formAddressLoc" width="20%">
1111
</td>

<td class="formFieldLabel" width="20%">
JOB TITLE:
</td>
<td class="formAddressLoc" width="60%">
garbadge collector
</td>
</tr>
</thead>
</table>

<BR />

<form name="appReqLine" id="appReqLine" action="appLetter.cfm" method="post" onsubmit="return _CF_checkappReqLine(this)">
<table width="700px" border="0" cellspacing="0" cellpadding="3">
<thead>
<tr>
<td align="left" colspan="5">
Please select applicants to print and click "<strong>Submit</strong>"
<br /><br />

<div class="formSpacer"><hr /></div>
</td>
</tr>
<tr>
<td class="formLineDetailHeader" width="20%">
PRINT
</td>
<td class="formLineDetailHeader" width="40%">
NAME
</td>
<td class="formLineDetailHeader" width="10%">
HISTORY
</td>
<td class="formLineDetailHeader" width="15%">
STATUS
</td>
<td class="formLineDetailHeader" width="15%">
DATE
</td>
</tr>
<tr>
<td id="chktd" align="center">
<a href="javascript:lnkChkAll('chktd','appReqLine')">Select All</a>&nbsp;
</td>
<td colspan="3">
<table width="100%" border="0" cellspacing="0">
<tr>
<td id="chkNQ" align="left">
<a href="javascript:lnkChkNQ('chkNQ','appReqLine')">NQ</a>&nbsp;
</td>
<td id="chk99" align="left">
<a href="javascript:lnkChk99('chk99','appReqLine')">99</a>&nbsp;
</td>
</tr>
</table>
</td>

</tr>

</thead>
<tbody>

<tr>
<tr bgcolor="#B0C4DE">
<td class="formLineDetail-a" width="20%">
<input name="applicantID" type="checkbox" value="1" id="applicantID_1" onclick="chglnk('chktd',this.form)" />
<input name="appID_1" id="appID_1" type="hidden" value="105" />
<input name="reqID_1" id="reqID_1" type="hidden" value="1111" />
<input name="reqDesc_1" id="reqDesc_1" type="hidden" value="garbadge collector" />
105

</td>
<td class="formLineDetail-b" width="40%">
<input name="namePrefix_1" id="namePrefix_1" type="hidden" />
<input name="firstName_1" id="firstName_1" type="hidden" value="JPRT" />
<input name="lastName_1" id="lastName_1" type="hidden" value="HILL" />
<input name="addr1_1" id="addr1_1" type="hidden" value="223 SEMINOLE DR " />
<input name="addr2_1" id="addr2_1" type="hidden" value="MONTGOMERY, AL 36117" />
<input name="reDate_1" id="reDate_1" type="hidden" value="09/07/2007" />
<input name="dateApp_1" id="dateApp_1" type="hidden" value="09/01/2007" />




HILL, . JPRT



</td>
<td class="formLineDetail-a" width="10%">











</td>
<td class="formLineDetail-a" width="15%" id="1">

<input name="appStatus_1" type="hidden" value="99" id="appStatus_1" />
99
</td>
<td class="formLineDetail-a" width="15%">
09/07/2007
</td>
</tr>












<tr>






<tr bgcolor="#EEEEEE">







<td class="formLineDetail-a" width="20%">
<input name="applicantID" type="checkbox" value="2" id="applicantID_2" onclick="chglnk('chktd',this.form)" />
<input name="appID_2" id="appID_2" type="hidden" value="104" />
<input name="reqID_2" id="reqID_2" type="hidden" value="1111" />
<input name="reqDesc_2" id="reqDesc_2" type="hidden" value="garbadge collector" />
104

</td>
<td class="formLineDetail-b" width="40%">
<input name="namePrefix_2" id="namePrefix_2" type="hidden" />
<input name="firstName_2" id="firstName_2" type="hidden" value="KRIS" />
<input name="lastName_2" id="lastName_2" type="hidden" value="KRINGLE" />
<input name="addr1_2" id="addr1_2" type="hidden" value=" " />
<input name="addr2_2" id="addr2_2" type="hidden" value=", " />
<input name="reDate_2" id="reDate_2" type="hidden" value="12/01/2007" />
<input name="dateApp_2" id="dateApp_2" type="hidden" value="09/01/2007" />




KRINGLE, . KRIS



</td>
<td class="formLineDetail-a" width="10%">











</td>
<td class="formLineDetail-a" width="15%" id="2">

<input name="appStatus_2" type="hidden" value="NQ" id="appStatus_2" />
NQ
</td>
<td class="formLineDetail-a" width="15%">
12/01/2007
</td>
</tr>












<tr>






<tr bgcolor="#B0C4DE">







<td class="formLineDetail-a" width="20%">
<input name="applicantID" type="checkbox" value="3" id="applicantID_3" onclick="chglnk('chktd',this.form)" />
<input name="appID_3" id="appID_3" type="hidden" value="100" />
<input name="reqID_3" id="reqID_3" type="hidden" value="1111" />
<input name="reqDesc_3" id="reqDesc_3" type="hidden" value="garbadge collector" />
100

</td>
<td class="formLineDetail-b" width="40%">
<input name="namePrefix_3" id="namePrefix_3" type="hidden" value="MS" />
<input name="firstName_3" id="firstName_3" type="hidden" value="MARIA" />
<input name="lastName_3" id="lastName_3" type="hidden" value="TESTING" />
<input name="addr1_3" id="addr1_3" type="hidden" value="33 4TH AVENUE " />
<input name="addr2_3" id="addr2_3" type="hidden" value="MONTGOMERY, AL 36109" />
<input name="reDate_3" id="reDate_3" type="hidden" value="12/01/2007" />
<input name="dateApp_3" id="dateApp_3" type="hidden" value="09/01/2007" />




TESTING, MS. MARIA



</td>
<td class="formLineDetail-a" width="10%">











</td>
<td class="formLineDetail-a" width="15%" id="3">

<input name="appStatus_3" type="hidden" value="NQ" id="appStatus_3" />
NQ
</td>
<td class="formLineDetail-a" width="15%">
12/01/2007
</td>
</tr>




</tbody>
<tfoot>
<tr>
<td align="left" colspan="5">
<br />

<div class="formSpacer"><hr /></div>
<input type="submit" name="submit" value="Submit" />
<input type="reset" value="Close" onclick="window.close()" />

<br /><br />
<small><strong>NOTE:</strong> Names shaded in <font color="##0000FF"><strong>blue</strong></font> indicates that
a letter of the same status has been sent.</small><br />

</td>
</tr>
</tfoot>
</table>
</form>


<br />
</div>
</div>
</body>
</html>

 

[cfinitialize]

okay...

this code works on selecting all records with appstatus of NQ -

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);
alert(appID);

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'&&cond==0) {
document.getElementById(appID).checked=true;
} //end if
/* else {
if (document.getElementById(appID).type=="checkbox") {
document.getElementById(appID).checked=false;
} //end if
} //end else */

appIndex = appIndex +1;

} //end if

} //end for


if( cond == 0 ) {
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkNQ('chkNQ','appReqLine')\">NQ</a>"
cond=1
} //end if
else {
document.getElementById(tdid).innerHTML="<a href=\"javascript:lnkChkNQ('chkNQ','appReqLine')\">NQ</a>"
cond=0
} //end else
} //end function



what should be my next step so that when I click the same link it will deselect them?

 

[cfinitialize]

i'm so stupid. nevermind a small validation to check if the boxes are checked or not will do.