Compare two numbers

JavaScript
1

Hi Guys,

I’m still new to Javascript. I have a web form that I use to insert a time (hh:mm) and I want a way to check whether time 1 is larger than time 2. I have:


function ValidateForm(){
	
	var emailAddress=document.configChange.emailAddress
	
	var timesmallH=document.configChange.timesmallH
	var timesmallM=document.configChange.timesmallM
	var timelargeH=document.configChange.timelargeH
	var timelargeM=document.configChange.timelargeM	
	
	var timesmallSEC = ((timesmallH * 60 * 60) + (timesmallM * 60))
	var timelargeSEC = ((timelargeH * 60 * 60) + (timelargeM * 60))	


if ((emailAddress.value==null)||(emailAddress.value=="")){
		alert("Please Enter an Email Address")
		emailAddress.focus()
		return false
	}

	
if (timesmallSEC > timelargeSEC){
		alert("warning - times are incorrect")
		timesmallH.focus()
		return false
	}
	
	return true
}

The email address part works fine, but the time section seems to be being ignored. I have checked the names are all correct, and logically it seems to make sense to me,but something is wrong.

e.g. If I put in
timesmallH = 0
timesmallM = 10
timelargeH = 0
timelargeM = 5

I should get

timesmallSEC = 600 (10 * 60)
timelargeSEC = 300 (5 * 60)

and so 600 > 300 I should get a warning box. But I don’t.

Can anyone see what might be wrong?

2

Are you sure the 4 inputs are being transfered to the variables in the function correctly using an alert()?

Can you post the html as well please.

3

Here is the HTML / PHP element that I am using.


<form name="configChange" action="configUpdate.php" method="post" onSubmit="return ValidateForm()">
	</br>
	</br>
		
PAGE CONFIG: 
	</br>			
	Send Email: <select name="sendEmail">
		<option Selected="selected" <?php print $send ?> </option>
  		<option value=0>No</option>
  		<option value=1>Yes</option>
		</select>
		</br>
		</br>
Email Address: <input type="text" name="emailAddress" value= <?php print $emailAddress ?> />
		</br>
		</br>	

<?php
		print "<select name=\\"timesmallH\\">";
		print "<option Selected=\\"selected\\" value=\\"$timesmallH\\">$timesmallH </option>";
			for($a = 0; $a <13; $a++) {
				print "<option value=$a>$a</option>";
			}
		print "</select> Hours";
		print "<select name=\\"timesmallM\\">";
		print "<option Selected=\\"selected\\" value=\\"$timesmallM\\">$timesmallM </option>";
			for($a = 0; $a <61; $a++) {
				print "<option value=$a>$a</option>";
			};
		print "</select> Minutes";

		print "<select name=\\"timelargeH\\">";
		print "<option Selected=\\"selected\\" value=\\"$timelargeH\\">$timelargeH </option>";
			for($a = 0; $a <13; $a++) {
				print "<option value=$a>$a</option>";
			}
		print "</select> Hours";
		print "<select name=\\"timelargeM\\">";
		print "<option Selected=\\"selected\\" value=\\"$timelargeM\\">$timelargeM </option>";
			for($a = 0; $a <61; $a++) {
				print "<option value=$a>$a</option>";
			};
		print "</select> Minutes";
	?>					
		</br>
		</br>				
		<input type="Submit" value="Save Changes"/>
		</form>
4

That’s strange, but might explain why it doesn’t work. If I replace

alert(“Please Enter an Email Address”)

with

alert(timesmallH)

I get a box that says

“[object HTMLSelectElement]”

and if I replace it with

alert(timesmallSEC)

I get

“NaN”

But why???

5

I’m getting a bit closer I think. By changing


        var timesmallH=document.configChange.timesmallH
	var timesmallM=document.configChange.timesmallM
	var timelargeH=document.configChange.timelargeH
	var timelargeM=document.configChange.timelargeM

to


        var timesmallH=document.configChange.timesmallH.selectedIndex
	var timesmallM=document.configChange.timesmallM.selectedIndex
	var timelargeH=document.configChange.timelargeH.selectedIndex
	var timelargeM=document.configChange.timelargeM.selectedIndex

It now works, BUT, only if both options are changed, because it seems to be reading the position in the list, not the value. As I display the previous value by default (in position 0), if only one option gets changed it doesn’t work.

I need a way of doing the check against the value, not the position.

6

To extract the value from the selected entry in the first select list you would use:

var timesmallH =
document.configChange.timesmallH[document.configChange.timesmallH.selectedIndex];

document.configChange.timesmallH is an array containing all the values that the options in the select contain and so you need to get the selectedIndex entry from that array in order to get the value you want.

7

Thanks for that,

I changed it as you suggested but now I get

“[object HTMLOptionElement]” for timesmallH and “NaN” for timesmallSEC

8

found it:


var timesmallH = 	document.configChange.timesmallH[document.configChange.timesmallH.selectedIndex].value;

cheers