PDA

View Full Version : Form Validation - Dynamic Same Value Check



blintas
Mar 15th, 2007, 09:24 PM
Hello,

I have a form with a series of select boxes. Each box is in a row with a unique ID number, and is named respectively as the following example will show:


<tbody><tr>
<td bgcolor="#333b18"><b><font color="#ffffff">Username:</font></b></td>
<td bgcolor="#333b18"><b><font color="#ffffff">Suite:</font></b></td>
<td bgcolor="#333b18"><b><font color="#ffffff">Book Date:</font></b></td>
<td bgcolor="#333b18"><b><font color="#ffffff">Invoice:</font></b></td>
<td bgcolor="#333b18"><b><font color="#ffffff">Payment Received:</font></b></td>
<td bgcolor="#333b18"><b><font color="#ffffff">Delete:</font></b></td> </tr><tr>
<td bgcolor="#ffffff"><font color="#000000">lyndsey.foster</font></td>

<td bgcolor="#ffffff"><font color="#000000"><select name="suiteno[71]" class="txt">
<option value="">- Unassigned - </option> <option value="101" selected="selected">101</option> <option value="102">102</option> <option value="103">103</option> <option value="104">104</option> </select></font></td>
<td bgcolor="#ffffff"><font color="#000000">2007-03-14 15:42:18</font></td>

<td bgcolor="#ffffff"><font color="#000000"><a href="gsinvoice.php?user=lyndsey.foster" target="_blank">Send Invoice</a></font></td>
<td bgcolor="#ffffff"><input name="payment[71]" value="2" type="checkbox"><font color="#000000">Payment Received</font></td>
<td bgcolor="#ffffff"><center><a href="gsdelete.php?gsid=71" onclick="return confirm('Are you sure you want to delete this Guest Suite Booking?');">
<img src="icons/delete.gif" border="0"></a></center></td>
</tr> <tr>
<td bgcolor="#ffffff"><font color="#000000">darryl.deen</font></td>
<td bgcolor="#ffffff"><font color="#000000"><select name="suiteno[70]" class="txt">

<option value="">- Unassigned - </option> <option value="101" selected="selected">101</option> <option value="102">102</option> <option value="103">103</option> <option value="104">104</option> </select></font></td>
<td bgcolor="#ffffff"><font color="#000000">2007-03-14 15:41:31</font></td>
<td bgcolor="#ffffff"><font color="#000000"><a href="gsinvoice.php?user=darryl.deen" target="_blank">Send Invoice</a></font></td>

<td bgcolor="#ffffff"><input name="payment[70]" value="2" type="checkbox"><font color="#000000">Payment Received</font></td>
<td bgcolor="#ffffff"><center><a href="gsdelete.php?gsid=70" onclick="return confirm('Are you sure you want to delete this Guest Suite Booking?');">
<img src="icons/delete.gif" border="0"></a></center></td>
</tr> <tr>
<td bgcolor="#ffffff"><font color="#000000">nexus.support</font></td>
<td bgcolor="#ffffff"><font color="#000000"><select name="suiteno[69]" class="txt">
<option value="">- Unassigned - </option> <option value="101" selected="selected">101</option> <option value="102">102</option> <option value="103">103</option> <option value="104">104</option> </select></font></td>

<td bgcolor="#ffffff"><font color="#000000">2007-03-14 15:41:06</font></td>
<td bgcolor="#ffffff"><font color="#000000"><a href="gsinvoice.php?user=nexus.support" target="_blank">Send Invoice</a></font></td>
<td bgcolor="#ffffff"><input name="payment[69]" value="2" type="checkbox"><font color="#000000">Payment Received</font></td>
<td bgcolor="#ffffff"><center><a href="gsdelete.php?gsid=69" onclick="return confirm('Are you sure you want to delete this Guest Suite Booking?');">
<img src="icons/delete.gif" border="0"></a></center></td>
</tr> <tr>
<td bgcolor="#ffffff"><font color="#000000">nexus.support</font></td>

<td bgcolor="#ffffff"><font color="#000000"><select name="suiteno[62]" class="txt">
<option value="">- Unassigned - </option> <option value="101" selected="selected">101</option> <option value="102">102</option> <option value="103">103</option> <option value="104">104</option> </select></font></td>
<td bgcolor="#ffffff"><font color="#000000">2007-03-14 15:37:44</font></td>

<td bgcolor="#ffffff"><font color="#000000">Invoice Sent</font></td>
<td bgcolor="#ffffff"><input name="payment[62]" value="2" type="checkbox"><font color="#000000">Payment Received</font></td>
<td bgcolor="#ffffff"><center><a href="gsdelete.php?gsid=62" onclick="return confirm('Are you sure you want to delete this Guest Suite Booking?');">
<img src="icons/delete.gif" border="0"></a></center></td>
</tr></tbody>

So the select boxes are named suiteno[50],suiteno[51] etc etc.

I want to be able to perform a check onSubmit that all the values are different, and display an alert if some values are the same.

Any suggestions?

glenngv
Mar 15th, 2007, 09:40 PM
function validateForm(oFrm){
if (!validateSelect(oFrm)){
alert("Please select different values in the dropdown list.");
return false;
}
return true;
}

function validateSelect(oFrm){
var idx=50;
var sel;
var selValues=[];
while (sel=oFrm.elements["suiteno["+(idx++)+"]"]){
if (selValues["opt"+sel.value]) { //key already has value in hash array
return false; //not unique
}
else { //store in hash array using value as key
selValues["opt"+sel.value] = sel.value;
}
}
return true; //unique
}
...
<form onsubmit="return validateForm(this)">

blintas
Mar 15th, 2007, 09:47 PM
Thanks for the reply.

Will this work if the id's are not in sequence? It's quite possible to run into suiteno[31], suiteno[42],suiteno[82] etc etc... it's almost random.

glenngv
Mar 15th, 2007, 10:16 PM
If that's the case, then whatever server-side language you use, you generate a javascript array containing all the number ids of the fields.

function validateSelect(oFrm){
var idx = new Array(31, 42, 82, 50); //generate this on the server-side
var sel;
var selValues=[];
for (var i=0; i<idx.length; i++) {
sel=oFrm.elements["suiteno["+idx[i]+"]"]);
if (selValues["opt"+sel.value]) { //key already has value in hash array
return false; //not unique
}
else { //store in hash array using value as key
selValues["opt"+sel.value] = sel.value;
}
}
return true; //unique
}

blintas
Mar 15th, 2007, 10:21 PM
Thanks for the reply. I will try it out and let you know how it goes.

Thanks,

Barry

blintas
Mar 15th, 2007, 10:51 PM
I'm actually getting a javascript error, but unfortunatley it only happens when i click submit and I don't have enough time to see what it is...

glenngv
Mar 15th, 2007, 10:55 PM
What error msg? Can you post the related code?

blintas
Mar 15th, 2007, 10:57 PM
[code]
$query = mysql_query("SELECT id FROM gsdays WHERE date='$selectdate'");
$suite_numbers = array();
while($row = mysql_fetch_assoc($query)) { $suite_numbers[] = $row['id']; }
$suite_number_array = implode(",",$suite_numbers);

echo<<<endhtml
<script language="Javascript">
function validateForm(oFrm){
if (!validateSelect(oFrm)){
alert("You may not assign the same suite to different users. Please try again.");
return false;
}
return true;
}

function validateSelect(oFrm){
var idx = new Array(
endhtml;

echo $suite_number_array;

echo<<<endhtml
); //generate this on the server-side
var sel;
var selValues=[];
for (var i=0; i<idx.length; i++) {
sel=oFrm.elements["suiteno["+idx[i]+"]"];
if (selValues["opt"+sel.value]) { //key already has value in hash array
return false; //not unique
}
else { //store in hash array using value as key
selValues["opt"+sel.value] = sel.value;
}
}
return true; //unique
}
</script>
[code]

the javascript error is Object Expected... hard to give the line number since this application is AJAX based.

glenngv
Mar 15th, 2007, 11:02 PM
Can you post the generated javascript code? View-Source the page and copy the script and post it here. It's hard to see the js error if there's server-side code.

Ancora
Mar 16th, 2007, 12:06 AM
blintas:

You may also want to try it this way:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nForm){

var verify = [];
var nLists = nForm.getElementsByTagName('select');
for (i=0; i<nLists.length; i++)
{
verify[i]= nLists[i].selectedIndex;
}
verify.sort();
var prevValue = verify[0];
var currValue = verify[0];
var unique = [];
unique[0] = verify[0];
for (each in verify)
{
currValue = verify[each];
if (currValue != prevValue)
{
unique[unique.length] = currValue;
prevValue = currValue;
}
}
if (unique.length != verify.length)
{
alert('Invalid:\nEach selection must be different');
return false;
}
alert('Thank you for your submission');
return true;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:250px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:tahoma;font-size:10pt;font-weight:bold;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;letter-spacing:+1px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="" onsubmit="return validate(this)">
<fieldset>
<legend>Form</legend>
<label>lyndsey.foster</label>
<select name='suiteno[62]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>daryl.deen</label>
<select name='suiteno[2]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>nexus.support</label>
<select name='suiteno[45]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>any.thing</label>
<select name='suiteno[50]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>some.thing</label>
<select name='suiteno[26]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>

</body>
</html>

glenngv
Mar 16th, 2007, 07:58 AM
blintas:

You may also want to try it this way:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nForm){

var verify = [];
var nLists = nForm.getElementsByTagName('select');
for (i=0; i<nLists.length; i++)
{
verify[i]= nLists[i].selectedIndex;
}
verify.sort();
var prevValue = verify[0];
var currValue = verify[0];
var unique = [];
unique[0] = verify[0];
for (each in verify)
{
currValue = verify[each];
if (currValue != prevValue)
{
unique[unique.length] = currValue;
prevValue = currValue;
}
}
if (unique.length != verify.length)
{
alert('Invalid:\nEach selection must be different');
return false;
}
alert('Thank you for your submission');
return true;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:280px;margin:auto}
fieldset {width:250px;background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:tahoma;font-size:10pt;font-weight:bold;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;letter-spacing:+1px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}

</style>
</head>
<body>
<form method="post" action="" onsubmit="return validate(this)">
<fieldset>
<legend>Form</legend>
<label>lyndsey.foster</label>
<select name='suiteno[62]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>daryl.deen</label>
<select name='suiteno[2]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>nexus.support</label>
<select name='suiteno[45]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>any.thing</label>
<select name='suiteno[50]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<label>some.thing</label>
<select name='suiteno[26]'>
<option value="">- Unassigned - </option>
<option value="101" selected>101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
</select>
<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>

</body>
</html>

That works but a long winded solution with 2 full loops. My solution has only 1 loop and stops when the first duplicate is found.

Anyway, blintas I think I found the error. In the code I posted, there is a misplaced ')'. Remove it.


for (var i=0; i<idx.length; i++) {
sel=oFrm.elements["suiteno["+idx[i]+"]"]);

Ancora
Mar 16th, 2007, 12:47 PM
The only thing "long winded" around here, is you. All you do is run your mouth at people. You have a disease, a compulsion to control every thread, every day. You just can't tolerate it if someone else comes along and has something to offer. Your actions speak for themselves. Instead of just posting the correction to YOUR code, you engage in a long winded tirade against mine.

Only a--holes appoint themselves to stand in judgment of others.

blintas
Mar 16th, 2007, 05:48 PM
Thank you both for your replies. Glenngv, thank you again, I changed the error you posted but would still get an error. I tried ancora's method and it worked without issue so I'll go ahead and use it.

Thanks again for both your time with my problem!

Barry

glenngv
Mar 16th, 2007, 07:27 PM
The only thing "long winded" around here, is you. All you do is run your mouth at people. You have a disease, a compulsion to control every thread, every day. You just can't tolerate it if someone else comes along and has something to offer. Your actions speak for themselves. Instead of just posting the correction to YOUR code, you engage in a long winded tirade against mine.

Only a--holes appoint themselves to stand in judgment of others.
Of course, that's not my intention. My apologies if you got offended.