topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

#javascript-form-rank-demo.htm / htm



  
  <!-- TWO STEPS TO INSTALL RANK 'EM:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the last code into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  <!-- Original:  Kent Rauch (kent@restekcorp.com) -->
  <!-- Web Site:   http://www.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>
  
  </HEAD>
  
  <!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <p>
  You can incorporate this validation feature into any existing form, any number of times.
  The form elements must be named consistently so the script can work with them.
  <p>
  <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>
  
  </form>
  
  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.
  
  <p><center>
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  4.83 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.