Why would this IF statement evaluate as TRUE?

[Steve]

Hello, I've been a PHP programmer for a number of years and have just
started to learn JS. My Employer (a water analysis lab) wants what
should be a very simple .js written that basically takes sample hold
time data from EPA regulations and spits out when a sample would
expire, so we can properly label the thing.

The problem is that the .js I have written appears to be doing
something unexpected.

The Analysis options are presented as check boxes to the user, and
whichever analysis has the shortest holding time is the one we base
our maximum holding time on.

Here is a snip of the HTML...

<SNIP>
<form method="post" action="" name="Analysis">
<table>
<tr>
<td colspan="2">Sample ID:</td><td><input maxlength=30
name="ID"></td>
</tr>
<tr>
<td>Analyis: (Check All That Apply)</td>
</tr>
<tr>
<td>
<input type="checkbox" name="METALS" >Metals (except Hg)<br>
<input type="checkbox" name="Hg" >Mercury (Hg)<br>
<input type="checkbox" name="ALK" >Alkalinity<br>
<input type="checkbox" name="H3N" >Ammonia<br>
<input type="Submit" onClick=Calc(Analysis) value="Calculate Hold
Times" >
</td>
</tr>
</table>


</form>
</SNIP>

And here is the .js

<SNIP>
function Calc(Analysis){
MyTime = new Date();
checkDate(Analysis,MyTime);
//alert("checkDate cleared success!"+ MyTime);
alert("The expiration of the holding time for sample will occur
"+MyTime);

return;
}

function checkDate(Analysis,MyTime){
alert("checkDate function called");
if(Analysis.RSDI || Analysis.pH){
alert("Entered if statement 1"+ MyTime);
MyTime.setHours(MyTime.getHours()+1);
return MyTime;
}

if(Analysis.ODOR){
alert("Entered if statement 2");
MyTime.setDate(MyTime.getDate()+1);
return;
}
</SNIP>

The problem is that it keeps entering the first if statement which
should only evaluate as true if pH or Residual Disinfectants is
checked. At which time it adds 1 to the hour field and then exits.

This seems VERY counter-intuitive.

I have manually added alerts to check for this behavior, but as you
can see, if you run the sample it just enters the first IF as though
it were true and then completely skips anything after the return
MyTime function.

Any Ideas on what may be wrong here?

Thanks in Advance!

p.s. I'm not sure if this makes a difference for our purposes or not,
it doesn't appear to, but anyways the .js is all contained between
HEAD tags.

 

[Lee]

Steve said:

function checkDate(Analysis,MyTime){
alert("checkDate function called");
if(Analysis.RSDI || Analysis.pH){

The problem is that it keeps entering the first if statement which
should only evaluate as true if pH or Residual Disinfectants is
checked.

If there is a form field named Analysis.RSDI, then the logical
expression Analysis.RSDI will always evaluate to true.

You seem want to test the "checked" attribute of Analysis.RSDI:

if(Analysis.RSDI.checked || Analysis.pH.checked) {

 

[RobG]

Steve wrote:
[...]

<SNIP>
<form method="post" action="" name="Analysis">
<table>
<tr>

Please don't use tabs for posted code, use double spaces.

<td colspan="2">Sample ID:</td><td><input maxlength=30
name="ID"></td>
</tr>
<tr>
<td>Analyis: (Check All That Apply)</td>
</tr>
<tr>
<td>
<input type="checkbox" name="METALS" >Metals (except Hg)<br>
<input type="checkbox" name="Hg" >Mercury (Hg)<br>
<input type="checkbox" name="ALK" >Alkalinity<br>
<input type="checkbox" name="H3N" >Ammonia<br>
<input type="Submit" onClick=Calc(Analysis) value="Calculate Hold

Here you are passing a reference to the form "Analysis", but better to
use this.form (and all attributes should be in quotes, including
JavaScript):

Times" >
</td>
</tr>
</table>


</form>
</SNIP>

And here is the .js

<SNIP>
function Calc(Analysis){
MyTime = new Date();

Don't be confident that the date object you create will be correct.
You may want to ensure it by validating against a datum sent from the
server.

checkDate(Analysis,MyTime);

You call checkDate(), but don't do anything with the result:

var x = checkDate(Analysis,MyTime);

//alert("checkDate cleared success!"+ MyTime);
alert("The expiration of the holding time for sample will occur
"+MyTime);

alert("The ... occur at " + x);

return;

It's usual to set the return value if it's important, I think you need
to do some validation and check stuff and if that fails, return false
so the form doesn't submit. If it all works, return true so it does.

I've deleted it in the code below just for now.

}

function checkDate(Analysis,MyTime){
alert("checkDate function called");
if(Analysis.RSDI || Analysis.pH){

This if statement just checks if the form Analysis has an element
called RSDI or pH (incidentally, these don't match the element names in
the form, I've fixed that below).

It will always evaluate to true as long as you have elements called
RSDI or pH (which you don't, see above). You want to see of they've
been checked:

if(Analysis.RSDI.checked || Analysis.pH.checked){

alert("Entered if statement 1"+ MyTime);
MyTime.setHours(MyTime.getHours()+1);
return MyTime;
}

if(Analysis.ODOR){
alert("Entered if statement 2");
MyTime.setDate(MyTime.getDate()+1);

And if no checkboxes are checked? I've added in an extra return to
return MyTime - which should be unmodified (i.e. now).

[...]

p.s. I'm not sure if this makes a difference for our purposes or not,
it doesn't appear to, but anyways the .js is all contained between
HEAD tags.

That is probably the best place to put it. Once you have it working,
put it into a separate .js file for easier maintenance.

The code below barely gets you going, there is a lot of work to be done
yet. You must check to see how many checkboxes have been checked and
only select the lowest value, and you should send a date/time stamp
from the server that is used on the client to ensure the correct time
even if the local machine's clock is incorrect.

If no checkboxes are checked, the code returns MyTime.

The logic is that the shorter times are checked first, however it would
be better to actually check for the shortest time so the logic is based
on fact rather than the order in which things are processed by the
code.

The checkbox names didn't even match your sample code, so please check
everything thoroughly and post back here with any problems.

Cheers.

<html><head><title>fred</title>

<script type="text/javascript">
function Calc(f){
MyTime = new Date();
var x = checkDate(f,MyTime);
alert("The expiration of the holding time" +
" for sample will occur at " + x);
return true;

}

function checkDate(f,MyTime) {
if(f.elements['Hg'].checked || f.elements['ALK'].checked){
MyTime.setHours(MyTime.getHours()+1);
return MyTime;
}
if(f.elements['H3N'].checked){
MyTime.setHours(MyTime.getHours()+4);
return MyTime;
}
return MyTime;
}

</script>

</head>
<body>
<form action="" name="Analysis">
<table><tr>
<td colspan="2">Sample ID:</td>
<td><input maxlength=30 name="ID"></td>
</tr><tr>
<td>Analyis: (Check All That Apply)</td>
</tr><tr>
<td>
<input type="checkbox" name="METALS" >Metals (except Hg)<br>
<input type="checkbox" name="Hg" >Mercury (Hg)<br>
<input type="checkbox" name="ALK" >Alkalinity<br>
<input type="checkbox" name="H3N" >Ammonia<br>
<input type="Submit" onClick="return Calc(this.form);"
value="Calculate Hold Times">
</td>
</tr>
</table>
</form>
</body></html>

 

[gr82meetu78]

Thank You!
That turned out to be exactly the answer I needed

 

[gr82meetu78]

Sorry about that I used snippets for berevity, but for the record the
code did have all the form fields correct, I just missed the .checked
method. As is addressed by another kind person in this NG.

As for having the logic evaluating the Analysis by holding time, with
just the order of operations, I'll admit I did take a shortcut here, it
should in fact compare them based on holding time, however I still
don't see a way to do this in .js, care to show me an example of how
this comparison would be done under best practices. Again thanks in
advance for your replies.

 

[gr82meetu78]

Sorry about that I used snippets for berevity, but for the record the
code did have all the form fields correct, I just missed the .checked
method. As is addressed by another kind person in this NG.

As for having the logic evaluating the Analysis by holding time, with
just the order of operations, I'll admit I did take a shortcut here, it
should in fact compare them based on holding time, however I still
don't see a way to do this in .js, care to show me an example of how
this comparison would be done under best practices. Again thanks in
advance for your replies.