I keep getting back a value of “undefined”… Not sure why it’s not working in for loop, but above that in alert($("#evalRate1").val()); does return a correct value.
Background:
I’m working on building an evaluation system and would like to hide the area for comments when an Evaluator chooses “No” for acceptable use, regardless of what the employee has selected. Here is the code I have so far.
Code:
//put a blue border around all questions
$(“.Questions”).css(“border”, “1px solid blue”);
//alert user to value of ID evalRate1
alert($(“#evalRate1”).val());
//loop from 1 to 15 for all items to hit every question
for(var i = 1; i <= 15; i++) {
var selfRateID = "selfRate" + i;
var evalRateID = "evalRate" + i;
var selfCmntID = "selfCmnt" + i;
var evalCmntID = "evalCmnt" + i;
alert("Variable is: " + evalRateID);
alert("Value is: " + $('#evalRateID').val());
//check the evaluator answer
//if the evaluator answer == 'No' (value = 0), hide the comment section
if($('#evalRateID').val() == 0) {
$(".Comments").css("display", "none");
alert("Hiding element!");
} else {
alert("Value was not == 0");
}
</script>
Generated Output of CFML as HTML:
My Evaluation Test Page
#pageTable {
width: 100%;
border: 1px solid black;
}
.Questions {
width: 100%;
}
.Comments {
width: 100%;
}
Question
Evaluator Score
Self Score
<tr>
<table class="Questions">
<tr id="Question1">
<td>1. This represents a question.</td>
<td width="150px"><select name="evalRate1" id="evalRate1">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate1" id="selfRate1">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts1" >
<td id="evalCmnt1">Evaluator Comment:<br />
<textarea name="evalCmnt1" cols="30" rows="6" readonly="readonly" id="evalCmnt1">This represents an evaluator comment for question #1.</textarea></td>
<td id="selfCmnt1">Self Comment:<br />
<textarea name="selfCmnt1" cols="30" rows="6" readonly="readonly" id="selfCmnt1">This represents a self comment for question #1.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question2">
<td>2. This represents a question.</td>
<td width="150px"><select name="evalRate2" id="evalRate2">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate2" id="selfRate2">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts2" >
<td id="evalCmnt2">Evaluator Comment:<br />
<textarea name="evalCmnt2" cols="30" rows="6" readonly="readonly" id="evalCmnt2">This represents an evaluator comment for question #2.</textarea></td>
<td id="selfCmnt2">Self Comment:<br />
<textarea name="selfCmnt2" cols="30" rows="6" readonly="readonly" id="selfCmnt2">This represents a self comment for question #2.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question3">
<td>3. This represents a question.</td>
<td width="150px"><select name="evalRate3" id="evalRate3">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate3" id="selfRate3">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts3" >
<td id="evalCmnt3">Evaluator Comment:<br />
<textarea name="evalCmnt3" cols="30" rows="6" readonly="readonly" id="evalCmnt3">This represents an evaluator comment for question #3.</textarea></td>
<td id="selfCmnt3">Self Comment:<br />
<textarea name="selfCmnt3" cols="30" rows="6" readonly="readonly" id="selfCmnt3">This represents a self comment for question #3.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question4">
<td>4. This represents a question.</td>
<td width="150px"><select name="evalRate4" id="evalRate4">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate4" id="selfRate4">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts4" >
<td id="evalCmnt4">Evaluator Comment:<br />
<textarea name="evalCmnt4" cols="30" rows="6" readonly="readonly" id="evalCmnt4">This represents an evaluator comment for question #4.</textarea></td>
<td id="selfCmnt4">Self Comment:<br />
<textarea name="selfCmnt4" cols="30" rows="6" readonly="readonly" id="selfCmnt4">This represents a self comment for question #4.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question5">
<td>5. This represents a question.</td>
<td width="150px"><select name="evalRate5" id="evalRate5">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate5" id="selfRate5">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts5" >
<td id="evalCmnt5">Evaluator Comment:<br />
<textarea name="evalCmnt5" cols="30" rows="6" readonly="readonly" id="evalCmnt5">This represents an evaluator comment for question #5.</textarea></td>
<td id="selfCmnt5">Self Comment:<br />
<textarea name="selfCmnt5" cols="30" rows="6" readonly="readonly" id="selfCmnt5">This represents a self comment for question #5.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question6">
<td>6. This represents a question.</td>
<td width="150px"><select name="evalRate6" id="evalRate6">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate6" id="selfRate6">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts6" >
<td id="evalCmnt6">Evaluator Comment:<br />
<textarea name="evalCmnt6" cols="30" rows="6" readonly="readonly" id="evalCmnt6">This represents an evaluator comment for question #6.</textarea></td>
<td id="selfCmnt6">Self Comment:<br />
<textarea name="selfCmnt6" cols="30" rows="6" readonly="readonly" id="selfCmnt6">This represents a self comment for question #6.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question7">
<td>7. This represents a question.</td>
<td width="150px"><select name="evalRate7" id="evalRate7">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate7" id="selfRate7">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts7" >
<td id="evalCmnt7">Evaluator Comment:<br />
<textarea name="evalCmnt7" cols="30" rows="6" readonly="readonly" id="evalCmnt7">This represents an evaluator comment for question #7.</textarea></td>
<td id="selfCmnt7">Self Comment:<br />
<textarea name="selfCmnt7" cols="30" rows="6" readonly="readonly" id="selfCmnt7">This represents a self comment for question #7.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question8">
<td>8. This represents a question.</td>
<td width="150px"><select name="evalRate8" id="evalRate8">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate8" id="selfRate8">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts8" >
<td id="evalCmnt8">Evaluator Comment:<br />
<textarea name="evalCmnt8" cols="30" rows="6" readonly="readonly" id="evalCmnt8">This represents an evaluator comment for question #8.</textarea></td>
<td id="selfCmnt8">Self Comment:<br />
<textarea name="selfCmnt8" cols="30" rows="6" readonly="readonly" id="selfCmnt8">This represents a self comment for question #8.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question9">
<td>9. This represents a question.</td>
<td width="150px"><select name="evalRate9" id="evalRate9">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate9" id="selfRate9">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts9" >
<td id="evalCmnt9">Evaluator Comment:<br />
<textarea name="evalCmnt9" cols="30" rows="6" readonly="readonly" id="evalCmnt9">This represents an evaluator comment for question #9.</textarea></td>
<td id="selfCmnt9">Self Comment:<br />
<textarea name="selfCmnt9" cols="30" rows="6" readonly="readonly" id="selfCmnt9">This represents a self comment for question #9.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question10">
<td>10. This represents a question.</td>
<td width="150px"><select name="evalRate10" id="evalRate10">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate10" id="selfRate10">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts10" >
<td id="evalCmnt10">Evaluator Comment:<br />
<textarea name="evalCmnt10" cols="30" rows="6" readonly="readonly" id="evalCmnt10">This represents an evaluator comment for question #10.</textarea></td>
<td id="selfCmnt10">Self Comment:<br />
<textarea name="selfCmnt10" cols="30" rows="6" readonly="readonly" id="selfCmnt10">This represents a self comment for question #10.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question11">
<td>11. This represents a question.</td>
<td width="150px"><select name="evalRate11" id="evalRate11">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate11" id="selfRate11">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts11" >
<td id="evalCmnt11">Evaluator Comment:<br />
<textarea name="evalCmnt11" cols="30" rows="6" readonly="readonly" id="evalCmnt11">This represents an evaluator comment for question #11.</textarea></td>
<td id="selfCmnt11">Self Comment:<br />
<textarea name="selfCmnt11" cols="30" rows="6" readonly="readonly" id="selfCmnt11">This represents a self comment for question #11.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question12">
<td>12. This represents a question.</td>
<td width="150px"><select name="evalRate12" id="evalRate12">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate12" id="selfRate12">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts12" >
<td id="evalCmnt12">Evaluator Comment:<br />
<textarea name="evalCmnt12" cols="30" rows="6" readonly="readonly" id="evalCmnt12">This represents an evaluator comment for question #12.</textarea></td>
<td id="selfCmnt12">Self Comment:<br />
<textarea name="selfCmnt12" cols="30" rows="6" readonly="readonly" id="selfCmnt12">This represents a self comment for question #12.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question13">
<td>13. This represents a question.</td>
<td width="150px"><select name="evalRate13" id="evalRate13">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate13" id="selfRate13">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts13" >
<td id="evalCmnt13">Evaluator Comment:<br />
<textarea name="evalCmnt13" cols="30" rows="6" readonly="readonly" id="evalCmnt13">This represents an evaluator comment for question #13.</textarea></td>
<td id="selfCmnt13">Self Comment:<br />
<textarea name="selfCmnt13" cols="30" rows="6" readonly="readonly" id="selfCmnt13">This represents a self comment for question #13.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question14">
<td>14. This represents a question.</td>
<td width="150px"><select name="evalRate14" id="evalRate14">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td width="150px"><select name="selfRate14" id="selfRate14">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts14" >
<td id="evalCmnt14">Evaluator Comment:<br />
<textarea name="evalCmnt14" cols="30" rows="6" readonly="readonly" id="evalCmnt14">This represents an evaluator comment for question #14.</textarea></td>
<td id="selfCmnt14">Self Comment:<br />
<textarea name="selfCmnt14" cols="30" rows="6" readonly="readonly" id="selfCmnt14">This represents a self comment for question #14.</textarea></td>
</tr>
</table>
</tr>
<tr>
<table class="Questions">
<tr id="Question15">
<td>15. This represents a question.</td>
<td width="150px"><select name="evalRate15" id="evalRate15">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
<td width="150px"><select name="selfRate15" id="selfRate15">
<option value="0" selected="selected">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
</table>
</tr>
<tr>
<table class="Comments">
<tr align="center" id="Cmnts15" >
<td id="evalCmnt15">Evaluator Comment:<br />
<textarea name="evalCmnt15" cols="30" rows="6" readonly="readonly" id="evalCmnt15">This represents an evaluator comment for question #15.</textarea></td>
<td id="selfCmnt15">Self Comment:<br />
<textarea name="selfCmnt15" cols="30" rows="6" readonly="readonly" id="selfCmnt15">This represents a self comment for question #15.</textarea></td>
</tr>
</table>
</tr>
</table>
</form>
<script type="text/javascript">
//put a blue border around all questions
$(".Questions").css("border", "1px solid blue");
//alert user to value of ID evalRate1
//alert($("#evalRate1").val());
//loop from 1 to 15 for all items to hit every question
for(var i = 1; i <= 3; i++) {
var selfRateID = "selfRate" + i;
var evalRateID = "evalRate" + i;
var selfCmntID = "selfCmnt" + i;
var evalCmntID = "evalCmnt" + i;
var CommentsID = "Cmnts" + i;
alert("Variable is: " + evalRateID);
//check the evaluator answer
//if the evaluator answer == 'No' (value = 0), hide the comment section
if($('#evalRateID').val() == 0) {
$(".Comments").css("display", "none");
} else {
alert("Value was: " + $('#evalRateID').val());
}
}
</script>
</body>
</html>
This is wrong.
It should be this.
The first one looks for the id
"evalRateID".The second one looks for the id stored in the
evalRateIDvariable.