Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

jSignature 1

Status
Not open for further replies.

Marine1969

IS-IT--Management
Mar 5, 2015
60
0
0
US
I tried this back in Jan and was never able to get this to work correctly. I suck with js so please be gentle. I found this script from unbolt it...
PHP:
<script language="JavaScript" type="text/javascript" src="jSignature.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $("#signature").jSignature({color:"#00f",lineWidth:5});
 });
 </script>
But it just says..."After the canvas image has been imported and saved into the database,...". And herein currently lies my issue. This script is part of a larger <form>. Is "$(document)." creating another <form>? What is the $_POST name to save the signature? I have a mysql db table field setup as TEXT to accept the data but currently the signature box is not even displaying!

I think I have read over 10 sites on how to do this and the less confusing ones I still cannot get to work. I want to understand what to do because I need to implement this in other places. A watered down script of the <form> is below...

jSignature.js is in the folder.
PHP:
<script src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>[/URL]
<script src="jquery-3.2.1.min.js"></script>

<form action="myrecords.php" method="POST">
<input type='text' name='blah1'>
<input type='text' name='blah2'>

<tr><td colspan="7">
    <center><button type="button" onclick="$('#signature').jSignature('clear')">Clear</button></center>
    <!-- <button type="submit" id="btnSave">Save</button> -->
                
    <script language="JavaScript" type="text/javascript" src="jSignature.js"></script>
    <script type="text/javascript">
       $('#btnSave').click(function(){
          var sigData = $('#signature').jSignature('getData','base30');
          $('#hiddenSigData').val(sigData);
       });
    </script> 

    </td></tr>

<input type="submit" value="Save" style="width:300px;height:50px;">
</form>
 
Hi

Marine1969 said:
currently the signature box is not even displaying
Where should it be displayed ? I can not find any element with [tt]id[/tt] "signature" in the code you posted.

Feherke.
feherke.github.io
 
It should display right above the "Clear" button.
 
Hi

Marine1969 said:
It should display right above the "Clear" button.
Ok, and do you have a [tt]<div [maroon]id[/maroon][teal]=[/teal][green]"signature"[/green]></div>[/tt] or something similar there ?


Feherke.
feherke.github.io
 
Nope. I copied the script from the link at the top of the first post.

UPdate...
I added <div id="signature"></div> above the "Clear" button.
 
Hi

This is going to be long this way. I better show you what works for me :
HTML:
[red]<!DOCTYPE[/red] [maroon]html[/maroon][red]>[/red]
[b]<html>[/b]

[b]<head>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"[/URL][/green][/i][b]></script>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"jSignature.js"[/green][/i][b]></script>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"jSignature.CompressorBase30.js"[/green][/i][b]></script>[/b]
[b]<script>[/b]
$[teal]([/teal]document[teal]).[/teal][COLOR=orange]ready[/color][teal]([/teal][b]function[/b][teal]() {[/teal]
   $[teal]([/teal][i][green]"#signature"[/green][/i][teal]).[/teal][COLOR=orange]jSignature[/color][teal]({[/teal]color[teal]:[/teal] [i][green]"#00f"[/green][/i][teal],[/teal] lineWidth[teal]:[/teal] [purple]5[/purple][teal]});[/teal]

   $[teal]([/teal][i][green]'#btnSave'[/green][/i][teal]).[/teal][COLOR=orange]click[/color][teal]([/teal][b]function[/b][teal]() {[/teal]
      [b]var[/b] sigData [teal]=[/teal] $[teal]([/teal][i][green]'#signature'[/green][/i][teal]).[/teal][COLOR=orange]jSignature[/color][teal]([/teal][i][green]'getData'[/green][/i][teal],[/teal] [i][green]'base30'[/green][/i][teal]);[/teal]
      $[teal]([/teal][i][green]'#hiddenSigData'[/green][/i][teal]).[/teal][COLOR=orange]val[/color][teal]([/teal]sigData[teal]);[/teal]
   [teal]});[/teal]
[teal]});[/teal]
[b]</script>[/b]
[b]</head>[/b]

[b]<body>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][i][green]"myrecords.php"[/green][/i] [maroon]method[/maroon][teal]=[/teal][i][green]"POST"[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]'text'[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]'blah1'[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]'text'[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]'blah2'[/green][/i][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"hidden"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"whatever"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"hiddenSigData"[/green][/i][b]>[/b]
[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][i][green]"signature"[/green][/i][b]></div>[/b]
[b]<button[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"button"[/green][/i] [maroon]onclick[/maroon][teal]=[/teal][i][green]"$('#signature').jSignature('clear')"[/green][/i][b]>[/b]Clear[b]</button>[/b]
[b]<button[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"submit"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"btnSave"[/green][/i][b]>[/b]Save[b]</button>[/b]
[b]</form>[/b]
[b]</body>[/b]

[b]</html>[/b]
Please note that :
[ul]
[li]For base30 formatting to work, you have to also include jSignature.CompressorBase30.js in the document. Without that the signature script will able to produce default format as [tt].jSignature('getData', 'default')[/tt] ( or simply [tt].jSignature('getData')[/tt] ), which is less space efficient[/li].
[li]You also have to add an [tt]input[/tt] of [tt]type[/tt] [tt]hidden[/tt] to your form, with the [tt]id[/tt] mentioned in the submit button's [tt].click()[/tt] handler, in your case "hiddenSigData".[/li]
[/ul]

Feherke.
feherke.github.io
 
Success!

I am trying to display it now and am only getting the html default image when the image is not there. I know the recordset is correct because I can display other fields from the table. The "signature" field has "image/jsignature;base30,2A0dihh642333588b8636dkqqkd43599b649dh4_1QZ7Y5dea2Z957750Y4631Z32520Y2500Z231Y3210Z24651"

What am I doing wrong?

PHP:
echo "<img src='" . $rs['signature'] . "' />";

I "opened" the default img and got this...
The requested URL /myfolder/image/jsignature;base30,2A0dihh642333588b8636dkqqkd43599b649dh4_1QZ7Y5dea2Z957750Y4631Z32520Y2500Z231Y3210Z24651 was not found on this server.

I know this is totally wrong! I have "images" for my them. Other than that I have no clue because that is the data in the signature field. Honestly I don't care what format it is saved in or what I need to do to get it to display. Basically, I'm not tied to base30.
 
Hi

The code you wrote is correct, but incompatible with the base30 formatting. That image/jsignature MIME type is only known by the jSignature script. If you write it as is in the [tt]src[/tt] attribute, the browser would need to handle it itself, but of course does not know it.

Given that I am unable to convince their own site to display the base30 formatted image, probably the best solution will be to change the getData to use default formatting and your PHP code will work.


Feherke.
feherke.github.io
 
I changed it to default and it works great! Thank you for the help!
 
Status
Not open for further replies.

Similar threads

Part and Inventory Search

Sponsor

Back
Top