Ajax doesn't show server response - php

Question

I'm trying to build a subscribe form. I can't run php on my site and I don't want the user leave the main site to subscribe the newsletter. I'm using this example as server side.
If you try to put in you email you will get redirected and the error message shows up even if the e-mail was added to the mailchimp list.
<div id="email">
<span>Your email..</span>
<form action="http://simondahla.com/jolliassets/notify.php" id="notify" method="POST">
<input type="text" placeholder="your#email.com" name="email" id="address" data-validate="validate(required, email)"/>
<span>We'll never spam or give this address away</span>
<button type="submit">»</button>
</form>
<span id="result"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#notify').submit(function() {
var action = $(this).attr('action');
$.ajax({
url: action,
type: 'POST',
data: {
email: $('#address').attr('value')
},
success: function(data){
$('#result').html(data).css('color', 'green');
},
error: function() {
$('#result').html('Sorry, an error occurred.').css('color', 'red');
}
});
});
});
</script>
live example of the problem

Answer 1

You need to return false from your submit handler. This is to prevent the browser from executing the default action, i.e. to submit the form the normal way.
$('#notify').submit(function() {
// .. your ajax call
return false;
});

Answer 2

From your PHP function you're going to return the values you want given the success or failure of the code.
Succeeded:
print json_encode(array("status"=>"success","message"=>'Successfully added'));
Failed:
print json_encode(array("status"=>"error","message"=>'There was an error'));
Then in the HTML you return that message like this:
success: function(data){
$('#result').html(content.message).css('color', 'green');
},
error: function() {
$('#result').html(content.message).css('color', 'red');
}