Create a survey asking people to rank things, and this JavaScript will validate that everything is ranked, and no rankings are repeated. Could be adapted into a detail
[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/utility/rank-em.jpg[/IMG]
Demo: Rank 'em
How to setup
Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<SCRIPT LANGUAGE="JavaScript">
// Kent Rauch (kent@restekcorp. com) | hxxp ://w w w.restekcorp. com
<!-- Begin
function validator() {
// copyright 2002 Kent Rauch
// global declaration
badrank = false;
rankem(1,4);
rankem(2,5);
if (!badrank) {
// this is a "phony submit" for testing purposes
document.clear();
document.write("success! it be sweet<br>\n");
}
}
// ---------------------------------------------------------
// Validate ranking questions: each value used exactly once.
function rankem(question, q_size) {
// copyright 2002 Kent Rauch
var aLert1 = "";
var aLert2 = "";
// supports up to 26 items to be ranked -- extend this array to increase
var cal = "a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p.q.r.s.t.u.v.w.x.y.z";
cal = cal.split('.');
var a = 0;
var irate = "rink" + question;
eval(irate + " = new Object();");
var myrate = "";
for (var x = 0; x < q_size; ++x) {
myrate = "q"+question+cal[x];
eval(irate + "[" + x + "] = document.test_form." + myrate + ".selectedIndex");
if (eval(irate + "[" + x + "]")) {
++a;
for (var y = 0; y < x; ++y) {
if (eval(irate + "[" + y + "]") == eval(irate + "[" + x + "]")) {
aLert1 = "Question "+ question +": please use each ranking only once.\n";
}
}
}
}
if (a != q_size) {
aLert2 = "Question " + question +":please rank all items.\n";
}
var aLert = aLert1 + aLert2;
if (aLert) {
alert(aLert);
badrank = true;
}
}
// End -->
</script>
<!--
This script downloaded from w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
-->
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<form name="test_form">
<table border=0>
<tr valign="top"><td>
1. Ice Cream:<br>
<select name="q1a"> <option><option>1<option>2<option>3<option>4 </select>
vanilla<br>
<select name="q1b"> <option><option>1<option>2<option>3<option>4 </select>
chocolate<br>
<select name="q1c"> <option><option>1<option>2<option>3<option>4 </select>
raspberry<br>
<select name="q1d"> <option><option>1<option>2<option>3<option>4 </select>
mint<br>
</td>
<td width="80"> </td>
<td>
2. Cars:<br>
<select name="q2a"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Corvette<br>
<select name="q2b"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Mustang<br>
<select name="q2c"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Testarosa<br>
<select name="q2d"> <option><option>1<option>2<option>3<option>4<option>5 </select>
Esprit<br>
<select name="q2e"> <option><option>1<option>2<option>3<option>4<option>5 </select>
RX-7<br>
</td></tr>
<tr><td colspan=2>
<input type="button" onClick="validator();" value=" send survey ">
</td></tr>
</table>
To set up a ranked-list survey question as in the examples above, name the <select>
s
as q + the number of the question + a, b, c, etc. In this case, the form elements are named:<blockquote>q1a<br>q1b<br>q1c<br>q1d<br>q2a<br>q2b<br>q2c<br>q2d<br>q2e</blockquote><p>To use the validation, call rankem(a,b) where the parameters are the question number and its length.
In this case, the form handler calls the function twice:<blockquote>rankem(1,4);<br>rankem(2,5);</blockquote><p>Each call will generate a separate alert if there's anything amiss. The global "badrank" variable
is a status flag so the main form handler knows if it's allowed to submit(). Note that this demo
doesn't acutally do a submit(); instead it just displays a message.
</form>
<!--
This script downloaded from w w w.JavaScriptBank. com
Come to view and download over 2000+ free javascript at w w w.JavaScriptBank. com
-->
JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow
LinkBack URL
About LinkBacks
Originally Posted by Copyright
Reply With Quote
Featured on:
