PDA

View Full Version : Required SelectBox

GregLuce
05-07-2003, 05:41 PM
I'm having trouble making a "state" selectbox required clientside. Here's my code:
<script LANGUAGE=JAVASCRIPT TYPE="text/javascript" >
<!--
function onError(form_object, input_object, object_value, error_message)
{
alert(error_message);
return false;
}
function hasValue(obj, obj_type)
{
if (obj_type == "SELECT")
{
for (i=0; i < obj.length; i++)
{
if (obj.options[i].selected)
return true;
}
return false;
}
}
function checkformx(this)
{
if (!hasValue(this.state, "SELECT" ))
{
if (!onError(this, this.state, this.state.value, "required"))
{
return false;
}
}
return true;
}
//-->
</script>

<body>
<!--- <cfform action="self" method="POST" name="formx"> --->
<FORM NAME="formx" ACTION="self" METHOD=POST onSubmit="return _CF_checkformx(this)">
<SELECT NAME="state">
<option value="" selected>Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
...
</select>
<input type="submit" name="y" value="Submit">
</form>
GregLuce
05-07-2003, 05:42 PM
Of course I mean the user needs to select a real state, not the default option of "Select State".

I'd like to validate on form submission I guess.
arnyinc
05-07-2003, 06:14 PM
Everyone hates magic numbers, but you can just check to make sure the first option [0] isn't selected.

<html>
<head>
<script language="javascript">
function _CF_checkformx(fname){
if (fname.state.options[0].selected){
alert('Pick a state');
return false;
}
else
return true;
}
</script>
</head>
<body>
<FORM NAME="formx" ACTION="self" METHOD=POST onSubmit="return _CF_checkformx(this)">
<SELECT NAME="state">
<option value="" selected>Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
</select>
<input type="submit" name="y" value="Submit">
</form>
</body>
</html>