When you move the .sigPad
class from the FORM element to the DIV element you no longer have a submit()
event that you can trigger. This event is only available for the FORM element. Because this event is not triggered, the signature image data is not copied into your INPUT element.
Try something like the follow update to your sample:
HTML
<form method="post" action="pdf.php">
<div class="sigPad">
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output1" class="output" />
</div>
<div class="sigPad">
<canvas class="pad" width="198" height="55"></canvas>
<input type="hidden" name="output2" class="output" />
</div>
<button type="submit">I accept the terms of this agreement.</button>
</form>
JavaScript
<script>
$( document ).ready( function ( ) {
$('.sigPad').signaturePad( );
} );
$( 'form' ).submit( function ( evt ) {
$( '.sigPad' ).each( function ( idx , el ) {
$( this ).find( '.output' ).val( $( this ).signaturePad( ).getSignatureImage( ) );
} );
} );
</script>
The updated JavaScript is not perfect, and maybe a bit confusing for you, but it's flexible enough to handle any number of signature fields. What's happening is that when the form submits the document is parsed for the signature pad containers. Then the each()
construct is used to set the value of the input.output
element to the value of the signature pad.
PHP
<?php
require_once '/dompdf/dompdf_config.inc.php';
$output1 = ( !empty( $_POST['output1'] ) ? $_POST['output1'] : 'http://placekitten.com/300/100' );
$output2 = ( !empty( $_POST['output2'] ) ? $_POST['output2'] : 'http://placekitten.com/300/100' );
$html = '
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>Signature 1:</p><br /><img src="'. $output1 .'">
<p>Signature 2:</p><br /><img src="'. $output2 .'">
</body>
</html>
';
$dompdf = new DOMPDF;
$dompdf->load_html( $html );
$dompdf->render( );
$dompdf->stream("test.pdf");
?>
I like ternary operators for initializing variables, but I'm evil. Also, we should always be mindful to perform extra validation of data from the client. So I might enhance the PHP to at least see if the base64 data is, in fact, base64 (and not, say, an HTML fragment).
$output1 = (!empty( $_POST['output1'] ) && base64_encode( base64_decode( $_POST['output1'] ) ) === $_POST['output1']) ? $_POST['output1'] : 'http://placekitten.com/300/100';
You could even go one step further and check to see if it's actually an image. But I'll leave that as an exercise for you.