Question

I was wondering, is it better to have javascript functions located in html tags, like for example

<form method="post" action="/web/comment" 
onsubmit="jQuery.ajax({
   type:'POST', 
   dataType:'html', 
   data:jQuery(this).serialize(), 
   success:function(data, textStatus) {
        jQuery('#comment').html(data);
   }, 
   url:'/web/comment'
 }); 
 return false;">

Or in external files like for example script.js ?

Answer 1

Consider readability (for humans) – in your example the code would surely be more readable in a separate file (as you suggest), or in a script block in your html file.

for example

<script type="text/javascript">
    function submitComments(commentsForm) {
        jQuery.ajax({
            type:'POST', 
            dataType:'html', 
            data:jQuery(commentsForm).serialize(), 
            success:function(data, textStatus) { jQuery('#comment').html(data); }, 
            url:'/web/comment'
        });
    }
</script>

and

<form method="post" action="/web/comment" onsubmit="submitComments(this); return false;">

Some pointers regarding jQuery

• Rather than directly setting the onsubmit property, check out jQuery’s event binding syntax. This allows you to nicely encapsulate your event handling code and its plumbing all in one place, which typically makes your code easier for people to understand.
• It is more usual to simply use the shorthand $ rather than jQuery in your code (unless $ has already been defined as meaning something else).