Client-side Javascript validation of "select multiple" for PHP


P

Phil Powell

Has anyone here ever done a case where you have a select multiple form
element and you have to do both server-side and client-side validation?

I am honestly not sure how to do it in Javascript (I keep getting errors
thrown that I can't verify because the form processes onto itself too
quickly for me to check the Javascript errors) because the select multiple
form element name has to be in the form of "var[]" because PHP will then
recognize $var as an array and not as a scalar (if it sees "$var" it will
only capture the LAST element you entered in the select multiple, if it sees
"$var[]" it gets them all).

However, "var[]" is not friendly to Javascript either, at least as far as I
can tell. So, what I need to find out is how anyone out there has ever
dealt with select-multiple form elements for BOTH Javascript AND PHP.

Thanx
Phil

PS: Code below:

<?


require_once('/home/nordicnet.no/include/nordicnet_global_vars_functions.php
');
require_once("$ACTUAL_STARTPATH/reports/include/reports_global_vars.php");
require_once("$ACTUAL_STARTPATH/reports/include/reports_classes.php");

if ($hasChosenReport) {
/*
$stuff = '<html><head><title>stuff</title></head><body><b>Hello</b>
World</body></html>';
$fileName = 'stuff.doc';

header("Content-type: application/msword");
header("Content-Length: " . strlen(ltrim($stuff)));
header("Content-Disposition: inline; filename=" . $fileName);

echo ltrim($stuff);
*/
print_r($_POST);
print_r("<P>");
print_r($reportType);
}

if (!$hasChosenReport) {
$report = new Report;
$report->dbOpen();

?>
<html>
<head>
<title><?= $brand ?>s Report</title>
<link rel=stylesheet href=/stylesheets/nordicnet_style.css type=text/css>
</head>
<script>
<!--
function isValidReportOption() {
hasPickedUsers = false;
userArray = eval('document.reportForm.users' . String.fromCharCode(91) .
String.fromCharCode(93));
for (i = 0; i < userArray.length; i++) {
if (userArray.selected) {
hasPickedUsers = true;
break;
}
}
if (!hasPickedUsers) {
alert("Velg brukern for report");
return false;
}
hasPickedType = false;
for (i = 0; i < document.reportForm.reportType.length; i++) {
if (document.reportForm.reportType.checked) {
hasPickedType = true;
break;
}
}
if (!hasPickedType) {
alert("Velg reportstil");
return false;
}
hasPickedInfo = false;
for (i = 0; i < document.reportForm.reportInfo.length; i++) {
if (document.reportForm.reportInfo.checked) {
hasPickedInfo = true;
break;
}
}
if (!hasPickedInfo) {
alert("Velg reportinfo");
return false;
}
}
//-->
</script>
<body>
<h2><?= $font ?>Jeg vill få <?= $brand ?>s reporten!</font></h2>
<a href=<?= $PHP_SELF ?>>Reset for ny reporten</a>
<form name=reportForm method=post action="<?= $PHP_SELF ?>"
onSubmit="return isValidReportOption()">
<?= $font ?>Velg brukern for reporten:</font><br>

<?
$reportQuery = $report->getUsers();
echo $report->userDropdown($reportQuery);
?>

<p>
<?= $font ?>Velg reportstil:</font><br>

<? echo $report->getTypes($report->getReportStilTypes(), 'reportType'); ?>

<p>
<?= $font ?>Velg reportinfo:</font><br>

<? echo $report->getTypes($report->getReportInfoTypes(), 'reportInfo'); ?>

<p>
<input type=hidden name=hasChosenReport value=1>
<input type=submit name=submit value="Få Min Report Nu!"
class=blue_button>
</form>
</body>
</html>

<?
$report->dbClose();
$report = null;
}
?>
 
Ad

Advertisements

M

Manuel Lemos

Hello,

Has anyone here ever done a case where you have a select multiple form
element and you have to do both server-side and client-side validation?

I am honestly not sure how to do it in Javascript (I keep getting errors
thrown that I can't verify because the form processes onto itself too
quickly for me to check the Javascript errors) because the select multiple
form element name has to be in the form of "var[]" because PHP will then
recognize $var as an array and not as a scalar (if it sees "$var" it will
only capture the LAST element you entered in the select multiple, if it sees
"$var[]" it gets them all).

However, "var[]" is not friendly to Javascript either, at least as far as I
can tell. So, what I need to find out is how anyone out there has ever
dealt with select-multiple form elements for BOTH Javascript AND PHP.

This class does exactly what you need:

http://www.phpclasses.org/formsgeneration

--

Regards,
Manuel Lemos

Free ready to use OOP components written in PHP
http://www.phpclasses.org/
 
J

Janwillem Borleffs

Phil Powell said:
I am honestly not sure how to do it in Javascript (I keep getting errors
thrown that I can't verify because the form processes onto itself too
quickly for me to check the Javascript errors) because the select multiple
form element name has to be in the form of "var[]" because PHP will then
recognize $var as an array and not as a scalar (if it sees "$var" it will
only capture the LAST element you entered in the select multiple, if it sees
"$var[]" it gets them all).

The usage of $var[] is not mandatory when you are able to parse the
$HTTP_RAW_POST_DATA string, which will be the case when you have enabled the
option 'always_populate_raw_post_data' in your php.ini file.

When the form method is set to GET you should parse
$_SERVER['QUERY_STRING'].
However, "var[]" is not friendly to Javascript either, at least as far as I
can tell. So, what I need to find out is how anyone out there has ever
dealt with select-multiple form elements for BOTH Javascript AND PHP.

You can get around it by accessing the JavaScript Form object's elements
array:

<script language="JavaScript">
function showSelected(form) {
var s = form.elements['var[]'];
for (var i = 0; i < s.length; i++) {
if (s.selected) alert (s.value);
}
}
</script>
.....
<form method="post">
<select name="var[]" multiple="true" size="4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<input type="button" value="Check" onclick="showSelected(form)" />
</form>

BTW, this is a FAQ in the comp.lang javascript newsgroup. See
http://www.jibbering.com/faq/ for more info.


JW
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

Phil said:
However, "var[]" is not friendly to Javascript either, at least as far as I
can tell.

You cannot use document.formname.elements.var[] because
`['...`]' is the index operator in JavaScript. Use
document.forms['formname'].elements['var[]'] instead.

I suggest you disable short tags and use `<?php' instead.
<html>
<head>
<title><?= $brand ?>s Report</title>
<link rel=stylesheet href=/stylesheets/nordicnet_style.css type=text/css>
</head>
<script>

That's invalid HTML. The DOCTYPE declaration is missing before the `html'
element, the charset declaration with the `meta' element is missing in the
`head' element and the `type' attribute is missing for the `script' element.
Also attribute values that contain the `/' character must be enclosed
in single or double quotes. (You should always enclose attribute values in
quotes as there are more characters that require quotes and
lookup/correction takes time.)

---> http://validator.w3.org/
[...]
<script>
<!--
function isValidReportOption() {
hasPickedUsers = false;

The `var' keyword is missing, you are defining global variables which you
want to avoid.
userArray = eval('document.reportForm.users' . String.fromCharCode(91) .
String.fromCharCode(93));

eval(...) is evil[tm] and you are mixing PHP and JavaScript. In
JavaScript, the string concatenation operator is `+', not `.':

var userArray = document.forms['reportForm'].elements['users[]'];


F'up2 comp.lang.javascript

PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top