How to require at least one checkbox

Here is your script:


<script>
            $(document).ready(function () {
                $('#checkBtn').click(function() {
                  checked = $("input[type=checkbox]:checked").length;

                  if(!checked) {
                    alert("You must check at least one record.");
                    return false;
                  }

                });
            });
</script>
            

Add this to your submit button:

 id="checkBtn"

Turn Off Auto-Complete for all browsers

While we all love the auto-complete function on browsers, there may be a reason to turn it off.  Mainly, for security reasons, like on banking sites.

This is a hack and the only solution that will work on all browsers. 

Add the following to all fields that you don't want to auto-fill:

readonly onfocus="this.removeAttribute('readonly');" style="background-color:white;"

What happens is, when the page loads, the fields are read only. Once the user clicks on the field to enter a value, the readonly attribute is removed.

Now, an important part of this is to make sure you add a white background so the fields don't appear to be readonly.

That's it!

nJoy.

How to keep a user's session alive

There may be instances where you need to keep a user's session alive. For example, your visitors need to take an hour long course, but the global session timeout is 30 minutes. You don't want the user's session to time out before they finish the course, right?

Here is a simple way to keep the session alive.

Add this script to the very top of the pages. Then, add a blank page in the same directory. Notice the bold red line below - I have a 'keep_alive.cfm" file in the same directory, which is accessed by the script which in turn keeps the session alive.

<script>
    var xmlhttp;
setInterval
    (
        function() {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("POST", "keep_alive.cfm", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("foo=bar");
        }, 60000
); // 1 minute
</script>



Enjoy!

Quick and easy way to hide and show items on a page with JavaScript

In this scenario, we want to hide/show salary questions IF the user is in certain states:


Step 1: The Form

Form Fields: I added an onClick event to the radio buttons which will kick off the SHOW/HIDE function: 

<input type="radio" value="0" onclick="javascript:showHideSalary();" id="legalStates0" name="legalStates"> NO

<input type="radio" value="1" onclick="javascript:showHideSalary();" id="legalStates1" name="legalStates"> YES





Step 2: The script

Add this script to the top of the page. Here I am saying if the users selects YES to the legal states question, hide the salary div.

<script>
function showHideSalary() {
    if (document.getElementById('legalStates0').checked){
        document.getElementById('salaryDiv').style.display = 'block';  display it
    }
    else document.getElementById('salaryDiv').style.display = 'none'; don't display it

}
</script>




Step 3: The DIV you want to hide. 


<div id="salaryDiv" style="display:none">

* add whatever you want to hide/display here *

</div>


Enjoy and let me know if you have any issues.