Separating jQuery from HTML

Question

I have a PHP page with various forms I've been using jQuery to submit/verify etc.

The problem is my JavaScript is getting really long. Is there a way to separate them?

The jQuery is just this sort of thing:

<script>
$(document).ready(function()
{  
   $("#form_email").live("submit", function(event)
   { 
      error = "0";
      $("#warning").hide();   
      if ($('#email_new').val() == "")
      {
          error = "1";
          $("#warning").html("Don't leave blank");
          $("#warning").slideDown('slow');           
      }

      if (error == "0")
      {
          $.post("php/settings_email.php",
          {
              email_new:$('#email_new').val(),
              email_password:$('#email_password').val()
          },
          function(data)
          {$("#email_alert").html("Email address changed");});
      }
    });
});        
</script>

I've tried referencing it like this:

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

Where am I going wrong?

.

ANSWER:

Make sure you reference your script AFTER the jQuery!

Also remove the script tags.

Answer 1

This should work:

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

If not works for you:

• double check file path
• check jquery is loaded before settings.js
• check you haven't leave any script tag in your settings.js

As a suggestion, start by trying to access file by hand (writting your settings.js URL directly to the address bar). If it doesn't work, you have a file path problem or you can have a problem with file permissions (if you are using a Linux system).

Answer 2

Remove the <script> tags from the .js file.