01.<!DOCTYPE html>
02.<html>
03.<head>
04.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
05.<title>jQuery UI Signature Basics</title>
07.<link href="jquery.signature.css" rel="stylesheet">
08.<style>
09..kbw-signature { width: 400px; height: 200px; }
10.</style>
11.<!--[if IE]>
12.<script src="excanvas.js"></script>
13.<![endif]-->
16.<script src="jquery.signature.js"></script>
17.<script>
18.$(function() {
19. $('#sig').signature();
20. $('#clear').click(function() {
21. Clear();
22. });
23. $('#json').click(function() {
24. $.ajax({url : 'insert_draw.php',
25. type : 'POST',
26. data : 'txtName='+$('#txtName').val()+
27. '&Draw='+$('#sig').signature('toJSON'),
28. datatype : 'json',
29. success : function (result){
30. var obj=jQuery.parseJSON(result);
31. if(obj['Status']=='Success'){
32. alert(obj['Msg']);
33. Clear();
34. }
35. }
36. });
37.
38. });
39.
40. function Clear(){
41. $('#txtName').val('');
42. $('#sig').signature('clear');
43. }
44.});
45.</script>
46.</head>
47.<body>
48.<table>
49. <tr>
50. <td>Name :</td>
51. <td><input type="text" id="txtName" placeholder="input you name"><br /></td>
52. </tr>
53. <tr>
54. <td>Signature</td>
55. <td><div id="sig"></div></td>
56. </tr>
57. <tr>
58. <td colspan="2"><button id="clear">Clear</button> <button id="json">Insert</button></td>
59. </tr>
60.</table>
61.
62.
63.</body>
64.</html>
