...

View Full Version : validate select list



nikko50
01-03-2011, 04:45 PM
I want to validate a select list that looks like the below select list. How can I do this when it is named "status[]".

<select size='4' MULTIPLE name='status[]'>

<option value='COMPLETE'>COMPLETE</option>
<option value='ENTERED'>ENTERED</option>
<option value='INSTALLED'>INSTALLED</option>
</select>

Kor
01-03-2011, 04:48 PM
Which is the problem with that name? Can you detail?

nikko50
01-03-2011, 06:16 PM
How do I validate that at least one of the select list values are selected. I'm having problems becuase I named the list status[].

Philip M
01-03-2011, 06:40 PM
The element name status[] is invalid in Javascript, but you can reference the select list using document.getElementById("status").


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Logic Ali
01-03-2011, 07:00 PM
Your element name is valid.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
</head>
<body>
<form action='' onsubmit="return validator( this )">
<p>
<select size='4' MULTIPLE name='status[]'>
<option value='COMPLETE'>COMPLETE</option>
<option value='ENTERED'>ENTERED</option>
<option value='INSTALLED'>INSTALLED</option>
</select>
<input type='submit'>
</form>
<script type='text/javascript'>

function validator( f )
{
var ok = false, box;

for( var i = 0, box = f[ 'status[]' ]; i < box.length && !( ok = box.options[ i ].selected ) ; i++ )
;

if( !ok )
alert( 'Nothing selected' );

return ok;
}

</script>
</body>
</html>

nikko50
01-03-2011, 07:29 PM
That rocks.

Tracy:)

nikko50
01-03-2011, 07:33 PM
Hey. If I wanted to put focus back on the select list how would i do that. I tried the below but no work.

if( !ok ){
theForm2.status.style.backgroundColor='pink';

theForm2.status.focus();
return false;
}

Logic Ali
01-03-2011, 07:59 PM
Hey. If I wanted to put focus back on the select list how would i do that. I tried the below but no work.

if( !ok ){
theForm2.status.style.backgroundColor='pink';

theForm2.status.focus();
return false;
}

Use the same notation from my example: theForm[ 'status[]' ].focus();

Kor
01-03-2011, 09:12 PM
The element name status[] is invalid in Javascript, but you can reference the select list using document.getElementById("status").

Not quite. As long as it is used as a string argument within an encapsulated brackets reference, should be ok.


document.forms['formname'].elements['status[]'][0]
//or even
document.getElementsByName('status[]')[0]


To: nikko50
I would have another question to to put: Why to use a name as "something[]" as long as you have a single element with a certain name? This way of naming (with[]) is used only related with php/MySQL server-side combination, as PHP is able to detect an array of name=value within the query, if it is the case. But it looks like there is no array of names there. Or it is?

nikko50
01-04-2011, 06:14 AM
this does not work correctly. If the user selects anything other than the first item in the list it does not validate true. How do I fix??


<script>
function validator(f)
{

var ok = false, box;

for( var i = 0, box = f[ 'vendors[]' ]; i < box.length && !( ok = box.options[ i ].selected ) ; i++ )

if( !ok ){
alert('Please Select a Vendor');

for(var i=0; i<box.length; i++) {
document.forms['theForm2'].elements['vendors[]'][i].style.background = 'pink';
}

return false;
}





return true;
}

</script>


<form method="POST" action="/S2/index2.php" name="theForm2" >

<fieldset class="label3"><legend class="label3">Query</legend>

<table class="small">
<tr >
<td>
Vendor<br>
<select size='4' MULTIPLE name='vendors[]'>


<option value='375'>MISC</option>
<option value='367'>IBM</option>
<option value='369'>HP</option>

</select>

</td>



<td VALIGN="middle"> &nbsp;&nbsp;<input type="button" onClick="return validator(this.form) && this.form.submit()" class="submitBtn" value="Search" name="B1">
</td>


</tr>
</table>

</fieldset>
<input type="HIDDEN" value="form2" name="Submit">
</form>

Old Pedant
01-04-2011, 07:17 AM
Why work so hard?


function validator(f)
{
var ddown = f["vendors[]"];
for( var i = 0; i < ddown.length; ++i )
{
if ( ddown.options[i].selected ) return true;
ddown.options[i].style.background = 'pink';
}
alert('Please Select a Vendor');
return false;
}

Yes, the options will be turned pink even if one of them is selected, but so what? The form will then be submitted and they will only be visible for a fraction of a second.

If none of them are selected, then all will indeed appear pink and the form won't be submitted.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum