Submitting Form and Progressive Enhancement

October 8th, 2009

Most users nowadays familiar with AJAX, well they don’t really know the term.
What users familiar is the experience, such as of submitting form without reloading the page.

So when you build new website or your web application, don’t forget to include this experience. But you also have to remember, there are some people who turn off their javascript or maybe the javascript failed to load. That is why, you should consider to use progressive enhancement.

In progressive enhancement, you can make your web application work in condition where no javascript available or failed, and enhance them if javascript available.

Lets just go with example, we’re building a form that will submit and reload to new page, but when javascript is available the form will be submitted via AJAX without reloading the page.

We’ll have simple table to demonstrate our example.

1
2
3
4
5

CREATE TABLE  `progressive`.`shouts` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`content` VARCHAR( 255 ) NOT NULL ,
`post_date` DATETIME NOT NULL
);

This our code for our example, when no javascript available everything will go with normal way, click send and it will reload the page. But when you have javascript then it will prevent you from normal form submit, and change it will ajax post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<html>
    <head>
        <title>Submitting form</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#fshout").submit(function() {
                    var shout = $("#shout").val();
                    $.post("post.php", { shout: shout },
                    function(data){
                        if (data == 1) {
                            $("#messages").prepend('<div style="border-bottom:1px solid #e1e1e1;padding:3px 4px;">'+shout+'</div>');
                            $("#shout").val("");
                        }
                    });
                    return false;
                });
            })
        </script>
    </head>
    <body style="width:300px;">
        <form id="fshout" method="post" action="post.php">
            <label>Shout</label><br/>
            <input type="text" name="shout" id="shout" /><br/>
            <input type="submit" value="Send" />
        </form>        
        <div id="messages">
        <?php 
            $link = mysql_connect('localhost','root', 'root');
            $db_selected = mysql_select_db('progressive', $link);
            $result = mysql_query('SELECT * FROM shouts ORDER BY post_date DESC');
            while ($row = mysql_fetch_assoc($result)) :            
        ?>
            <div style="border-bottom:1px solid #e1e1e1;padding:3px 4px;">
                <?= $row['content'] ?>
            </div>
        <? endwhile ?>
        </div>
    </body>
</html>

Here the code for inserting the content to our table.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
 
$link = mysql_connect('localhost','root', 'root');
$db_selected = mysql_select_db('progressive', $link);
 
$shout = $_POST['shout'];
mysql_query("INSERT INTO shouts(content, post_date) VALUES('$shout', NOW())");
 
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
    echo "1";
    exit;
}
header("location:form");
?>

Now, you have bulletproof AJAX form. Thanks for reading my blog.

Related posts:

  1. CakePHP ACL Tutorial – What and How
  2. CodeIgniter Tutorial – To do list application#2
  3. Codeigniter tutorial – To do list application
  4. CodeIgniter Tutorial – ORM with DataMapper
  5. Getting started with XML/SWF Charts

Tags:

3 Comments