betweenGo

Unobtrusive JavaScript’s goal is to move all the functionality (the Controller) out of the HTML (the Model) and the CSS (the View).  This is also called full MVC separation.

This is how typically JavaScript and HTML mix.  For example in submitting a form using a text link.

<a href="javascript:submit(document.testForm)">Submit</a>

Or for jumping to different parts of a page using a dropdown.

 <input type="image" src="/img/buttons/update.gif"
   onClick="window.location.hash=
document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">

Using the unobtrusive JavaScript technique one can separate the JavaScript from the HTML.

<div id="foo">Submit</div>

<script type="text/javascript">
 Event.observe($('foo'), 'click', function(event) {
   $(Event.element(event)).form.submit();
   return false;
 });
</script>

We use the Protoculous JavaScript file which combines the Prototype framework and Scriptaculous libraries to do unobtrusive JavaScript.

Related posts:

1. Submitting an ATG Form Using a Text Link
2. Submitting a form with a radio button
3. Jumping to different parts of a page using a dropdown
4. ATG forms do not work if action is an HTML page
5. JavaScript Invalid Argument in Internet Explorer Only