dominiquepeters Posted November 17, 2014 Report Share Posted November 17, 2014 Has anyone added a digital signature field to a submission form, as written in this Caspio post: http://forums.caspio.com/index.php/topic/4693-js-adding-a-digital-signature-to-a-submission-form/I've tried this on two different websites and did exactly what is written but for some reason, I can't get the signature box to work. This is a test site where I have set up a submission form with a digital signature:http://www.reduceincidents.co/dominique/index.htmlDo you have any suggestions on how to resolve this issue. Has somebody this digital signature working?Thanks so much for your help,Dominique Quote Link to comment Share on other sites More sharing options...
dominiquepeters Posted November 18, 2014 Author Report Share Posted November 18, 2014 The guy who has created the signaturepad has helped me out on this. The script order is wrong in the original post. First you have to put - step b in the heading <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> and then - step a <script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script> now it works Quote Link to comment Share on other sites More sharing options...
Jan Posted November 19, 2014 Report Share Posted November 19, 2014 Hello Dominique! Thank you for sharing the solution! Quote Link to comment Share on other sites More sharing options...
Jan Posted January 13, 2015 Report Share Posted January 13, 2015 Maybe, somebody else looks for the solution how to display a Signature. It is rather simple: Do steps a ) and b ) from the article. Add an HTML Block to your DataPage, click the "Source" button and enter the following code: <div class="sigPad"> <canvas class="pad" width="220" height="55"></canvas> </div> <script> var sig = [@field:Signature]; var api = $('.sigPad').signaturePad({displayOnly:true}); api.regenerate(sig); </script> Please enter the name of your field instead of "Signature". I hope, it will be useful. Quote Link to comment Share on other sites More sharing options...
oceaim Posted January 13, 2015 Report Share Posted January 13, 2015 Hi Caspio Rockstar, I have tryed your code to display Signature, Can't get it to work. Any suggestions? Quote Link to comment Share on other sites More sharing options...
Jan Posted January 14, 2015 Report Share Posted January 14, 2015 Hi oceaim, Do you have lines from steps b and a on the webpage in the correct order? Is it the name of the field "Signature"? You can delete the "[@field:Signature]" and insert the parameter with the parameter picker instead of the code. Could you provide the URL of your page? Quote Link to comment Share on other sites More sharing options...
mikeg Posted April 21, 2015 Report Share Posted April 21, 2015 I have the signature working on my form and the data captured on the table. What can the data that was captured be viewed with for reference? Quote Link to comment Share on other sites More sharing options...
Jan Posted May 7, 2015 Report Share Posted May 7, 2015 Hello mikeg, Welcome to Caspio Forum! Have you tried this solution? Does it work for you? Quote Link to comment Share on other sites More sharing options...
ababcock Posted May 20, 2015 Report Share Posted May 20, 2015 I followed the steps on the original article, and I flipped the two lines indicated in this thread, but mine isn't working. I get a box with a "Clear" button under it, but you can't type in the box. I can't share my URL, but do you have any suggestions? Quote Link to comment Share on other sites More sharing options...
aam82 Posted May 20, 2015 Report Share Posted May 20, 2015 For anyone having trouble displaying: when inserting the Signature field, insert it as HTML, instead of string. Quote Link to comment Share on other sites More sharing options...
ababcock Posted May 20, 2015 Report Share Posted May 20, 2015 Sorry, what does that mean? "When inserting the signature field" -- is that when I'm creating the field in the table, or when I'm configuring it in the submission form? Or is this part of following the instructions in the original article to use the javascript? Thanks for your help! Quote Link to comment Share on other sites More sharing options...
Jan Posted May 21, 2015 Report Share Posted May 21, 2015 Hello ababcock, Do you work with a Submission DataPage? If I understand correctly, you cannot type in the box, you can draw with the cursor of your mouth. I am sorry, if I understand your question incorrectly. Quote Link to comment Share on other sites More sharing options...
ababcock Posted May 21, 2015 Report Share Posted May 21, 2015 Yes, this is a Submission DataPage. Thank you for the clarification about drawing the signature! In either case, I am seeing the box with the "Clear" button under it, but I can't do anything to it. I can't draw anything with my mouse in it, click in it, type in it, etc. Quote Link to comment Share on other sites More sharing options...
Jan Posted May 22, 2015 Report Share Posted May 22, 2015 Hello ababcock, Do you check the working of Signature in Preview mode or on the deployed DataPage? As far as I know, this solution does not work in Preview. Now I have opened my DataPage in Preview and I see the same behavior. Could you post the content of your "<head>" tag?I have the following code: <HTML> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.signaturepad.min.js"></script> </head> <body> Code of embedded DataPage. </body> </html> Quote Link to comment Share on other sites More sharing options...
aam82 Posted May 28, 2015 Report Share Posted May 28, 2015 Sorry, what does that mean? "When inserting the signature field" -- is that when I'm creating the field in the table, or when I'm configuring it in the submission form? Or is this part of following the instructions in the original article to use the javascript? Thanks for your help! To use Jan's snippet for displaying the signature, you can follow her directions. They describe how to insert an HTML block, and then insert your signature field (such as [@field:Signature]). When you do that last bit, you will be asked whether to insert the field as a string or as html, and you must choose html. As for your other question here, if you follow the directions on this page exactly, I can confirm it will work. Quote Link to comment Share on other sites More sharing options...
ababcock Posted May 29, 2015 Report Share Posted May 29, 2015 Thanks for all your help! When I try to add the Signature field, I'm running into an issue. I only have the option to add Auth fields and Parameters, rather than fields in the tables I'm using, when I use the picker. I should be selecting the Signature field where the signature will be stored in a table, right? I would enter it in as @field:Signature, but I'm not sure how to make it HTML instead of String (as recommended above), and I'm not sure if it will work since it's not available in the picker. Ideas? Quote Link to comment Share on other sites More sharing options...
aam82 Posted May 29, 2015 Report Share Posted May 29, 2015 The signature field must be added to your submission form like you add any field. Now add a second field, an HTML block. This is what will display the signature. Disable the HTML editor in advanced. Return to the editor. Use Jan's snippet above, in post #4, but delete "[@field:Signature]". In its place, use the field picker that is available just above the editing space. It has a down arrow. Choose your signature field, and set it to HTML instead of string. You don't have to use the signature submission field and the signature display html block on the same datapage, but I am, so that users will see that their submission was successful. Quote Link to comment Share on other sites More sharing options...
pedrolopez Posted June 10, 2015 Report Share Posted June 10, 2015 Please, can you let me know the content or value of the signature field in the table after signed? I think that in my try this field is empty, I can't get it following the posts Thanks! Quote Link to comment Share on other sites More sharing options...
Jan Posted June 11, 2015 Report Share Posted June 11, 2015 Hi pedrolopez, Welcome to Caspio forum! I have a number of coordinates, like "[{"lx":35,"ly":12,"mx":35,"my":11},{"lx":35,"ly":11,"mx":35,"my":12}," and so on. When you "draw" with a mouse, is anything displayed in the field?Do you check in Preview mode or in the deployed webpage? Quote Link to comment Share on other sites More sharing options...
pedrolopez Posted June 16, 2015 Report Share Posted June 16, 2015 Thank you Jan, sign is working now, Quote Link to comment Share on other sites More sharing options...
pgjacob Posted June 18, 2015 Report Share Posted June 18, 2015 I am also trying this and gotten it to submit a signature on a single record update page. The Signature int he Table appears as a bunch of characters and numbers, which I assume is what it is supposed to so. HOwever when I try to display this signature on the details page as asuggested in the article, the same gobbeldy gook appears... is this what is supposed to appear? I assume it translates this stuff back into an actual signature... maybe not. I tried in both Mozilla (38.0.5) and Chrome 3.0.2357.124 thanks. Quote Link to comment Share on other sites More sharing options...
Jan Posted June 21, 2015 Report Share Posted June 21, 2015 Hi, Please make sure that all the following steps are done: a. Copy the code below and paste inside the <head> section of your web page: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> b. Download the JavaScript file from here and upload the file to your website hosting. Once uploaded, you’ll need to reference this file in the <head> section of your web page. Example: <script src="http://yoursite.com/yourfolder/jquery.signaturepad.min.js"></script> c. Edit the Details page of the DataPage and choose form element "hidden" for "Signature" field in the Configure Fields screen. Insert an HTML Block after the "Signature" field. Go to the Source of the HTML Block and insert the following code. <div class="sigPad signed"> <div class="sigWrapper"> <canvas height="55" width="198" class="pad"></canvas></div> </div> <script> var sig = eval("[@field:Signature]".replace(/"/g, '"')); $(document).ready(function () { $('.sigPad').signaturePad({displayOnly:true}).regenerate(sig); }); </script> d. Insert Header & Footer using the picker button at the lower right of the DataPage Elements. Disable HTML editor for both Header and Footer from the Advanced tab. Copy the code below and paste inside the HTML Header. <div id="cb_sign_wrapper"> e. Copy the code below and paste inside the HTML Footer. </div> I hope, it helps. Medron 1 Quote Link to comment Share on other sites More sharing options...
streetsmart Posted June 23, 2015 Report Share Posted June 23, 2015 In the directions, Step B, the phrase "upload the file to your website hosting" is confusing. What does this mean? Quote Link to comment Share on other sites More sharing options...
Cameron Posted June 29, 2015 Report Share Posted June 29, 2015 Hello, You can save the file to your disk and then copy it to your hosting folder, I mean, the folder where webpages of your site are stored.Do you have a web hosting now, by the way? Or do you plan to create a site? Quote Link to comment Share on other sites More sharing options...
spazz1421 Posted April 25, 2016 Report Share Posted April 25, 2016 Is there anyway to add an additional signature field. Creating a form to track repair orders and want to have a signature for drop off and pick up... thanks in advance Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.