将JSignature输出存储到mysql以在单独页面上重新绘制(Store JSignature output to mysql to be redrawn on separate page)

将JSignature输出存储到mysql以在单独页面上重新绘制(Store JSignature output to mysql to be redrawn on separate page)

有人可以向我解释一下如何获取我的JSignature表单的输出并将其存储在我的MySQL数据库中，这样我就可以在以后的某个页面重新绘制这个愚蠢的东西吗？ 我发誓我有时候觉得自己像个白痴。 请记住，我对Javascript知之甚少，可能需要有人一步一步地指导我。

好吧，我已经通过以下代码获得了JSignature在我的页面上工作：

<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>

这些都在通过$ _POST提交大量数据的表单中。

正如您所看到的，我添加了一个按钮，将输出显示到任何警报窗口，但我不知道如何将该值放在隐藏的输入中，以便可以使用我的表单的其余部分提交。

提前谢谢大家。

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.

最满意答案

时髦的插件。

<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>

上面的代码片段说： 1.“当点击带有id'btnSave'的按钮时”... 2.将签名画布转换为bas64编码的字符串，并将其保存在名为'sigData'的变量中。 3.将id为“hiddenSigData”的字段的值设置为变量“sigData”。

繁荣，你有它。

你有任何处理你的表单的服务器端代码？ 我假设你正在使用<form>标签......然后该字段将显示POST的数据。

如果您没有任何数据处理程序，则需要根据您运行的内容查看C＃/ PHP。 但是，无论如何......这就是JS位。

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.