Simon Battersby

I seem to have come across quite a few queries about using this autosave plugin. So, here’s an explanation…

Let’s start with the form – I’m using php to retrieve data from a database and display it in a form for editing. To make the demo worthwhile I’ve added various input elements:

<form action="autosave2.php" method="post">
<fieldset>
<label for="name">Name:<input type="text" name="name" id="name" value="<?php echo $row['name'] ?>"/></label>
<label for="email">Email:<input type="text" name="email" id="email" value="<?php echo $row['email'] ?>" /></label>
<label for="textbox">Text:<textarea id="textboxarea" name="textboxarea" rows="2" cols="20"><?php echo $row['textarea'] ?></textarea></label>
<label for="check">Check:<input type="checkbox" name="check" id="check" <?php if ($row['checkbox']==1) echo "checked='checked'"; ?>/></label>
<label for="selectfield">Select:<select id="selectfield" name="selectfield">
<option>Option 1</option>
<option>Option 2</option>
</select></label>
<label for="radio1">Radio 1:<input type="radio" name="radios" id="radio1" value="radio1" <?php if ($row['radio']=="radio1") echo "checked='checked'"; ?>/></label>
<label for="radio2">Radio 2:<input type="radio" name="radios" id="radio2" value="radio2" <?php if ($row['radio']=="radio2") echo "checked='checked'"; ?>/></label>
<input type="hidden" name="id" value="<?php echo $row['id'] ?>" />
<input type="submit" value="Save changes" />
</fieldset>
</form>
<p id="message"></p>

I’m including an empty element for the message, just to keep the javascript simple – a more sophisticated solution would append this when required. Now, to add the autosave functionality I need to include this javascript:

$("input,select,textarea").autosave({
			url: "autosave2.php",//set the php file that updates the database
			method: "post",
			grouped: true,//send data for all fields with the autosave
    		       success: function(data) {//on a successful update...
        		$("#message").html("Data updated successfully").show();//...show a message...
				setTimeout('fadeMessage()',1500);//...and then fade it out after an interval
    		},
			send: function(){//on a save...
        		$("#message").html("Sending data....");//..show a message
			},
    		dataType: "html"
		});		
	
       function fadeMessage(){
		$('#message').fadeOut('slow');//just a function to fade out the message
	}

All this just leaves the php to update the database, which is:

if ($_POST['check']=="true") $check = 1; 
else $check = 0;

$qstring="UPDATE test_autosave SET name = '".$_POST["name"]."' ,";
$qstring .= " email = '".$_POST["email"]."',";
$qstring .= " textarea = '".$_POST["textboxarea"]."',";
$qstring .= " selectfield = '".$_POST["selectfield"]."',";
$qstring .= " checkbox = ".$check.",";
$qstring .= " radio = '".$_POST["radios"]."'";
$qstring .= " WHERE id =".$_POST['id']."";

Inevitably, there’s a working demo here – just to make it more obvious the demo includes a snapshot of the database itself to show the updates.

A few people have asked for copies of the php files used in the demo – so here they are as text files:

• Demo page code: autosave_demo2.php
• Database update code: autosave2.php
• Code that updates the page via ajax: autosave3.php