WebGUI Templates HQ

Unobtrusive Javascript

First of all, keep your Javascript seperated from your Html. Just like CSS Javascript should be put in an external file and linked to the Html page in the head tags like this:

<script type="text/javascript" src="scripts.js"></script>

If you have a special reason to use inline script tags, you should start with a CDATA tag:

<script type="text/javascript">
  /*<![CDATA[*/
  ...
  /*]]>*/
</script>

Also, make sure you use Javascript as an enhancement rather than a necessity.
IE. If you want to post a form, make sure it will also be submitted if the user doesn't have Javascript turned on.

DO

HTML:

<form action="checkForm" onsubmit="return checkform(this)">
    <p>
        Login: <input type="text" name="login" id="login" />
        <br />
        <input type="submit" value="send" />
    </p>
</form>

Javascript:

function checkform(form) {
    var error='';
    error += f.login.value == '' ? 'login' : '';

    if (error!='') {
        alert('Please enter the following:' + error);
    }
    
    return error=='';
}

DON'T

HTML:

<form action="checkForm">
    <p>
        Login: <input type="text" name="login" id="login" />
        <br />
        <input type="button" onclick="checkform(this)" value="send" />
    </p>
</form>

Javascript:

function checkform() {
    var f = document.forms[0];
    var error = '';
    error += f.login.value == '' ? 'login' : '';

    if (error!='') {
        alert('Please enter the following:' + error);
    }
    else {
        f.submit();
    }
}

If the user has Javascript disabled, the form won't be submitted because it doesn't trigger the checkform function and the button isn't set as a submit button.

T.b.a.