Ajax request using site_url not working

Hello. I'm new to php, ajax and codeigniter so I'm sure I'm doing something silly. But this code works...

edit: Forgot to mention I'm using Jquery for the first time as well!

Code:

$.ajax({
           type: 'POST',
           url: "http://localhost/websitename/index.php/signup/email_available",
           data: {email: e},
           success: function(response) {
               signupValidator.emailAvailableCallback(response);
           }
       })

But this code does not work....

Code:

$.ajax({
           type: 'POST',
           url: "<?php echo site_url('signup/email_available')?>",
           data: {email: e},
           success: function(response) {
               signupValidator.emailAvailableCallback(response);
           },
           
           error: function(s, s2, s3) {
               alert(s.responseText);
           }
       })

Basically the problem is with the php echo site url line. This does not seem to be working. I'm not sure how to even check what it is printing out. When I check the source on the page the php code is written out and not the site address. I've searched many examples on the internet and they all seem to do it the way I have tried.

*websitename isn't actually the name of my site. I changed that as I copied the code in because I don't want then name of my site known yet.

In your first example you use index.php but not in your second example. Why? Have you changed config.php from $config['index_page'] = 'index.php'; to $config['index_page'] = ''; and made a .htaccess file in the root directory ?