Is it better to have javascript functions in a file or in html tag?

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 extern开发者_开发技巧al files like for example script.js ?

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).

its always better to have all your javascript code in a separate file..

Read Separation of concerns.

Here is also a link that I like about this topic: http://wardley.org/computers/web/separation.html

Putting them in external files makes your markup a lot easier to read and to maintain. It also enables you to reuse scripts across pages without duplicating the code.

excluded javascript code in a seperate file will enable the browser to cache it ;) benefit: page loads much quicker :)

I think it is too small part of code to move it in separate file, it will be better to separate it in script region. Somethink like that (http://api.jquery.com/submit/):

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

Best practice is to have only the form, with its own ID, in the HTML then attach the events like this.

HTML:

<form id="Form1" method="post" action="/web/comment">

JavaScript:

window.onload = function() {
    var oForm = document.getElementById("Form1");
    oForm.onsubmit = function() {
        //code here....
        return false;
    }
};

As you're already using jQuery, this can be made even more simple:

jQuery(document).ready(function() {
    jQuery("#Form1").bind("submit", function() {
        jQuery.ajax({
            type:'POST', 
            dataType:'html', 
            data:jQuery(this).serialize(), 
            success:function(data, textStatus) {
                jQuery('#comment').html(data);
            }, 
            url:'/web/comment'
        }); 
        return false;
    });
});