Can someone please explain to me exactly how to take the output of my JSignature form and store it in my MySQL database so I can get the stupid thing to redraw on another page later? I swear I feel like such a total idiot sometimes. Please keep in mind that I know very little about Javascript and will likely need someone to walk me through this step by step.
OK so, I have gotten the JSignature working on my page with the following code:
<div id="signatureparent">
<div id="signature"></div>
<button type="button" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" onclick="alert($('#signature').jSignature('getData','base30'))">Save</button>
</div>
<div id="scrollgrabber"></div>
<script src="jsig/src/jSignature.js"></script>
<script src="jsig/src/plugins/jSignature.CompressorBase30.js"></script>
<script src="jsig/src/plugins/jSignature.CompressorSVG.js"></script>
<script src="jsig/src/plugins/jSignature.UndoButton.js"></script>
<script>
$(document).ready(function() {
var $sigdiv = $("#signature").jSignature({'UndoButton':false})
})
</script>
This is all within a form that is submitting a bunch of data via $_POST.
As you can see, I have added a button that will display the output to any alert window but I have no clue as to how to place that value inside a hidden input so it can be submitted with the rest of my form.
Thank you to everyone in advance.
Funky plugin.
<div id="signatureparent">
<div id="signature"></div>
<button type="button" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" id="btnSave">Save</button>
</div>
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<div id="scrollgrabber"></div>
<script src="jsig/src/jSignature.js"></script>
<script src="jsig/src/plugins/jSignature.CompressorBase30.js"></script>
<script src="jsig/src/plugins/jSignature.CompressorSVG.js"></script>
<script src="jsig/src/plugins/jSignature.UndoButton.js"></script>
<script>
$(document).ready(function() {
var $sigdiv = $("#signature").jSignature({'UndoButton':false});
// -- i explain from here...
$('#btnSave').click(function(){
var sigData = $('#signature').jSignature('getData','base30');
$('#hiddenSigData').val(sigData);
});
// -- ... to here.
})
</script>
That snippet of code above says:
1. "when the button with the id 'btnSave' is clicked"...
2. Convert the signature canvas to a bas64 encoded string, and save it in a variable called 'sigData'.
3. Set the value of the field with id 'hiddenSigData' to variable 'sigData'.
Boom, you have it.
Do you have any server-side code for processing your form? I've assumed that you're using <form> tags... that field will then just appear with the POST'ed data.
If you don't have any handler for the data, you'll need to look into C#/PHP depending on what you're running. But, anyway.. that's the JS bit.