Page 1 of 1

Varied multiple fields, one submit button. What went wrong?

Posted: Tue Jan 25, 2011 2:54 pm
by Cyberen
Greetings, fellow developers. A noob here again, and I've been struggling with this chunk of code for quite a while. I want to ensure three things occur before the submit button is not grayed out:

1. A country is selected and not the empty ----- line.
2. A string more than 2 characters long is input in the zip field.
3. 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. :banghead:

Code: Select all

<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="">&mdash;&mdash;&mdash;&mdash;</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();">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

Re: Varied multiple fields, one submit button. What went wro

Posted: Wed Jan 26, 2011 10:40 am
by Reviresco
1. Make the country dashed-line option disabled="disabled"
2. Change onkeydown to onkeyup for the zip code
3. Get rid of the "javascript&#058;" before the function call
4. Add "method="post"" to the form
5. Need to add an "action" to the form unless it's going to this same page
6. Main problems: remove the "elements" array from "document.getElementById("country").elements[0].value" and "document.getElementById("zipcodetitle").elements[1].value.length"

#6 was the main problem, but there were other contributing issues. For example, using onkeydown instead of onkeyup for the zip code was making it not respond after you typed a third number.

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/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" method="post" action="where_does_this_go.php">

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

<option value="US" selected="selected">United States
<option value="CA">Canada
<option value="" disabled="disabled">&mdash;&mdash;&mdash;&mdash;</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="disabled">
</p>

</form>
</body>
</html>
 

Re: Varied multiple fields, one submit button. What went wro

Posted: Wed Jan 26, 2011 5:55 pm
by Cyberen
Thank you! This worked! I am very grateful! 8)