Varied multiple fields, what went wrong?

EDIT: It works now! Here's the original code and the corrected one below. Leaving up here since apparently I can't delete my own threads.

I wanted the code to have these three conditions before the button was un-grayed out.

A country is selected and not the empty ----- line.
A string more than 2 characters long is input in the zip field.
A checkbox must be checked.

Once all three of those conditions are met, the button should be un-grayed and thus go to the next page, with $_POST values for the form fields. Will that be automatic or should I add $_POST somewhere in it?

Here is my code, I am sure I am missing some minor detail that is the cause of the whole mess.


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript" language="javascript">

<!--

function toggleButton()

{


if ((document.getElementById("country").elements[0].value != "") && (document.getElementById("zipcodetitle").elements[1].value.length > 2) && (document.getElementById("chk1").checked == true))

{

document.frm1.orderbutton.disabled = false;

}

else

{

document.getElementById("orderbutton").disabled = true;

}


}

-->

</script>

</head>

<body>

<form name="frm1" id="frm1">

<p>Country: <select tabindex="70" name="country" id="country" onMousedown="javascript:toggleButton();">

<option value="US" selected="selected">United States

<option value="CA">Canada

<option value="">————</option>

<option value="AX">Aland Islands</select></p>

<p>Zip Code/Postal Code: <input name="zipcodetitle" type="text" id="zipcodetitle" size="12" class="formfont" onkeydown="javascript:toggleButton();">		 </p>

<input type="checkbox" id="chk1" name="chk1" onchange="javascript:toggleButton();" value="1" /><p>

<input type="submit" width="700" value="Continue" name="orderbutton" id="orderbutton" class="formfont"

disabled="disabled">

</p>

</form>

</body>

</html>

Here's the corrected code thanks to some help I got:

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/javascript" language="javascript">

<!--

function toggleButton()

{

if ((document.getElementById("country").value != "") && (document.getElementById("zipcodetitle").value.length > 2)&&(document.getElementById("chk1").checked == true))

{

document.frm1.orderbutton.disabled = false;

}

else

{

document.getElementById("orderbutton").disabled = true;

}


}

-->

</script>

</head>

<body>

<form name="frm1" id="frm1" action="order.php" method="post">

<p>Country: <select tabindex="70" name="country" id="country" onMousedown="toggleButton();">

<option value="US" selected="selected">United States

<option value="CA">Canada

<option value="">————</option>

<option value="AX">Aland Islands</select></p>

<p>Zip Code/Postal Code: <input name="zipcodetitle" type="text" id="zipcodetitle" size="12" class="formfont" onkeyup="toggleButton();">		 </p>

<input type="checkbox" id="chk1" name="chk1" onchange="toggleButton();" value="1" /><p>

<input type="submit" width="700" value="Continue" name="orderbutton" id="orderbutton" class="formfont"

disabled="true">

</p>

</form>

</body>

</html>

Edited by Cyberen, 26 January 2011 - 03:54 PM.
no longer relevant