We have seen how to submit data of a web form using .load() method by using .serialize() and .serializeArray() in the previous topic. Web form is so widely used in the web. We use it to submit an enquiry, fill in personal particulars, ask or answer a question in a forum.

However web form may not appear to be just labels or input fields, it can something like "star rating" that we use it to rate a hotel, services, a book or a movie.

This is how it looks like.

The Godfather (1972)

The Godfather (1972) widely regarded as one of the greatest films of all time, this mob drama, based on Mario Puzo's novel of the same name, focuses on the powerful Italian-American crime family of Don Vito Corleone (Marlon Brando).

When the don's youngest son, Michael (Al Pacino), reluctantly joins the Mafia, he becomes involved in the inevitable cycle of violence and betrayal. Although Michael tries to maintain a normal relationship with his wife, Kay (Diane Keaton), he is drawn deeper into the family business.

On scale of 1 to 10, 10 being terrific and 1 being terrible, please rate The Godfather (1972).

div id = "result1"

The 10 stars that you have seen above are actually options of HTML select element.

<form id="movie-form1">
    <select id="movie-rating1" name="rating">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>                                

Instead of showing 1 to 10 in a dropdown list, I chose to use JQuery Bar Rating, a light weight JQuery plugin to transform the select element into 10 stars.

First of all, we must turn HTML select element from dropdown list into star rating by calling .barrating() method when DOM is ready.

$("#movie-rating1").barrating({theme: 'css-stars'});

Please be sure to download the neccessary Javascript and CSS. In my case, I only need "jquery.barrating.min.js" as JQuery plugin and "css-star.css" and Bar Rating theme.

        $("#movie-rating1").barrating({theme: 'css-stars'});

Now that we have turned HTML select into star form, what we are going to to do next is, whenever there is a change of value of the select element, we want to call .load() method to send the form data to server asychronously (after all, this is what Ajax is about).

            $("#result1").load( #result1 is just a div to display response from server
                'http://www.ajax-tutor.com/demo/movie-rating-response.php', URL or server resource
                $("#movie-form1").serializeArray() serialize form data into JQuery object

The URL that we will be requesting is a PHP page is http://www.ajax-tutor.com/demo/movie-rating-response.php. We will be using .serializeArray() of JQuery to transform form data into Javascript object before sending.

As explained earlier, if the second parameter is a Javascript Object, .load() is going to make a HTTP POST instead of HTTP GET to server.

Subsequently, we are going to use the response of the PHP page and populate into a div element "result1".

For the sake of explanation, I make my PHP page (movie-rating-response.php) ridiculously simple. If you rate 1 star, it returns "1/10", if you rate 2, it will be "2/10" and so on. It is just a one-line PHP file.

    echo '<h1>'.$_POST['rating'].'/10</h1>';

In most circumstances, we want to write the vote of user into a database storage but I am not going to cover database insert for now.

The moment you click a star, you will see the div element below shows the rating accordingly. The display of the result does not just happen in client-side Javascript, the Javascript has sent a request to the server and that is the response of the server.