Databases
StackOverflow2013
Postsdbo
POCan this code be optimized?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan this code be optimized?
    primarykey
    data
    text
    <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 Reigel for the code, its way better than what I initialy started with.</p> <p>My question is, can the javascript code I have be optimized. For instance, the clearforms function, or anything else. I am a noob, just started to work with javascript 3 days ago, so any advice is appreciated.</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() { $(':checkbox[name=checkbox]').click(function() { //update checkCount checkCount = $(':checked').length; if (checkCount &gt;= maxChecks) { //alert('you may only choose up to ' + maxChecks + ' options'); $(':checkbox[name=checkbox]').not(':checked').attr('disabled', true); } else { $(':checkbox[name=checkbox]: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($(':checked').length) }); $('#button2').click(function() { alert($('input[name="result"]').val()); }); }); </code></pre> <p>And this is the modified javascript per advice of Peter Ajtai (Thanks Again! To Peter, and Reigel the person who took the original code I had and rewrote it entirely to shorten it.)</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(); 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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJames
    1. USJames
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan this code be optimized?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI edited this post to put code inline. James, the questions on this site are generally intended to be indexed by Google, such that people with similar issues can later find answers to their questions. Do not place links to temporary content. With only 3 reputation, it leads me to believe that it was a subtle advertisement.
      singulars
      1. POCan this code be optimized?
      1. USriwalk
    2. CO@Stargazer: an advertisement for...jsfiddle? It's certainly nice to have the code available right in the question, but a jsfiddle link is a great convenience for people who want to tackle the question.
      singulars
      1. POCan this code be optimized?
      1. USIan Henry
    3. CO@Ian Henry, then those who wish to use jsfiddle can do so on their own. Links on reputable sites (such as this one) boost the page rank of the site being linked to. If James had more rep, I would be less suspicious. Either way, the content is temporary and the link would likely break in the future.
      singulars
      1. POCan this code be optimized?
      1. USriwalk
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload