Download
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script>
$(document).ready(function(){
$("#addButton").fancybox({
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'hideOnContentClick': false,
'padding' : 15
});
/* The submit button: */
$('#note-submit').live('click',function(e){
if($('.pr-body').val().length<4)
{
alert("The note text is too short!")
return false;
}
if($('.pr-author').val().length<1)
{
alert("You haven't entered your name!")
return false;
}
$(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
var data = {
'body' : $('.pr-body').val(),
'author' : $('.pr-author').val()
};
/* Sending an AJAX POST request: */
$.post('post.php',data,function(msg){
$("#addButton").fancybox.close();
});
e.preventDefault();
})
$('.note-form').live('submit',function(e){e.preventDefault();});
});
</script>
<a id="addButton" class="green-button" href="add_note.html">Add a note</a>
//add_note.html <h3 class="popupTitle">Add a new note</h3> <div id="noteData"> <form action="" method="post" class="note-form"> <label for="note-body">Text of the note</label> <textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea> <label for="note-name">Your name</label> <input type="text" name="note-name" id="note-name" class="pr-author" value="" /> <a id="note-submit" href="" class="green-button">Submit</a> </form> </div>
//post.php
<?php
error_reporting(E_ALL^E_NOTICE);
require "connect.php";
$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
/* Inserting a new record in the notes DB: */
mysql_query(' INSERT INTO notes (text,name)
VALUES ("'.$body.'","'.$author.'")');
?>
