Subscribe Form using Ajax

Question

I'm really clueless as to how to get this done. I need to make a subscribe with email button and it needs to be validated and show a little message for success, Loading ands Error.

I have never worked with Ajax before and this is what I have to do, I have To complete the newsletter subscribe ajax-functionality using a pre-defined controller in a php file on the server called newsletter.php and the I should use the controller function named subscribe in there to generate the response for the ajax request.

If that makes any sense please help me out.

This is my form for the email address

<div id="subscribeText">
      <form action="" method="post" name="ContactForm" id="ContactForm" >
        <input type="submit" name="subscribeButton" id="subscribeButton" value="Submit" />
        <input type="text" name="subscribeBox"  id="subscribeBox" value="Enter your email address..." size="28" maxlength="28" onFocus="this.value=''" />
      </form>

    </div>

http://jsfiddle.net/vaaljan/R694T/

This is what the success should look like and error and loading pretty much the same. What the success message looks like

Hope this isn't too far fetched, I have not worked with java script that much yet but I understand more or less.

Thanks

Answer 1

I have made a small example on jsfiddle.

$('#send').click(function (e) {
e.preventDefault();
var emailval = $('input#email').val();
console.log(emailval);
if (emailval !== "") {
    $.ajax({
        cache: false, // no cache
        url: '/echo/json/', // your url; on jsfiddle /echo/json/
        type: 'POST', // request method
        dataType: 'json', // the data type, here json. it's simple to use with php -> json_decode
        data: {
            email: emailval // here the email
        },
        success: function (data) {
            console.log(data);
            $('<strong />', {
                text: 'Successfull subscribed!'
            }).prependTo('#state');
        },
        error: function (e) {
            $('<strong />', {
                text: 'A error occured.'
            }).prependTo('#state');
        },
        fail: function () {
            $('<strong />', {
                text: 'The request failed!'
            }).prependTo('#state');
        }
    });
} else {
    alert("Insert a email!");
}

});

Here it is.

It uses jQuery for the ajax request.
The example shows how ajax works.