title: Keeping code from being exploited, Securing Javascript and Forms
body: <p>I am creating a page that allows users access to a certain section of my website if they click 8 out of 25 checkboxes in the right sequence.</p>
  
  <p>First of all thanks to <a href="https://stackoverflow.com/users/251986/reigel">Reigel</a> for the orignal code, he took what I had and rewrote it, its way better than what I initialy started with. Also thanks to <a href="https://stackoverflow.com/users/186636/peter-ajtai">Peter Ajtai</a> for helping me optimize the code.</p>
  
  <p>My question is, how can I clean the output, keeping anyone from exploiting anything, or adding anything that will mess up the server. Is it needed?</p>
  
  <p>Here is a live Version: <a href="http://jsfiddle.net/xSsrC/3/" rel="nofollow noreferrer">Click Here to see a live working version</a></p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;body onLoad="clearForms()" onUnload="clearForms()"&gt;
  
   &lt;p&gt;&amp;nbsp;&lt;/p&gt;
   &lt;p&gt;&amp;nbsp;&lt;/p&gt;
   &lt;p&gt;&amp;nbsp;&lt;/p&gt;
   &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;form id="form1" name="form1" method="post" action="check_combination.php"&gt;
  &lt;table width="200" border="1" align="center"&gt;
  
  &lt;tr&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="1" /&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="2"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="3"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="4"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="5"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="6"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="7"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="8"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="9"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="10"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="11"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="12"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="13"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="14"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="15"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="16"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="17"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="18"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="19"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="20"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="21"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="22"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="23"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="24"/&gt;&lt;/td&gt;
   &lt;td width="20" align="center" valign="middle"&gt;&lt;input name="checkbox" type="checkbox" value="25"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td height="23" colspan="5" align="center" valign="middle" class="label"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="button" value="Test length" id="test" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="submit" name="button" id="button" value="Submit" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
   &lt;td height="28" colspan="5" align="center" valign="middle"&gt;&lt;input type="button" name="button" id="button2" value="Test hidden input value" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;input name="result" type="hidden" id="result" /&gt;
  
  &lt;/form&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>function clearForms() {
      var i;
      for (i = 0; (i &lt; document.forms.length); i++) {
         document.forms[i].reset();
   $(':checkbox[name=checkbox]:disabled').attr('disabled', false);
  
      }
  }
  
  
  //initial checkCount of zero
  var checkCount = 0;
  
  //maximum number of allowed checked boxes
  var maxChecks = 8;
  
  $(document).ready(function() {
  
  clearForms();
  
  $("#form1").submit(function(e) {
    if($("input:checkbox:checked").length &lt; 8) {
      alert("You must select at least 8 options before submitting!");
      e.preventDefault();
    }
  });
  
  var $nameCheckbox = $('input:checkbox[name=checkbox]');
  
      $nameCheckbox.click(function() {
  
          //update checkCount
          checkCount = $('input:checked').length;
  
          if (checkCount &gt;= maxChecks) {
              //alert('you may only choose up to ' + maxChecks + ' options');
              $nameCheckbox.not(':checked').attr('disabled', true);
          } else {
              $nameCheckbox.filter(':disabled').attr('disabled', false);
          }
  
          if (this.checked) {
              $("td.label").append('&lt;label&gt;' + this.value + ' &lt;/label&gt;');
          } else {
              $("td.label").find(':contains(' + this.value + ')').remove();
          }
  
          $('input[name="result"]').val($("td.label").text());
  
      });
  
  
      $("#test").click(function() {
          alert($('input:checked').length)
      });
  
      $('#button2').click(function() {
          alert($('input[name="result"]').val());
      });
  
  });
  </code></pre>