The signature code right now is set up to work with one signature, as you've encountered. The most straightforward way to do it is:
- Put all of the signature fields (including the custom HTML) into a collection, give the collection the sigCollection class.
- Go through all of the Custom HTML and change the ID attribute for each to instead be a class attribute (e.g., instead of "id="sigData" you'd change it to "class="sigData").
- Select the collection and click Duplicate.
Use this refactored signature code instead of the previous code. This code will allow you to modify the signatures independently of each other and will allow you to have more than one signature on the form.
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
function htmlDecode(value) {
return $('<div/>').html(value).text();
}
$.getScript('https://dl.dropboxusercontent.com/u/14829216/jSignature.min.js', function () {
$('.signature').jSignature();
});
/**When the page loads, check if the sig data (hidden) field has a value.
If it has a value, decode it and put it in the image, and remove the
signature pad and its buttons.**/
$(document).ready(function(){
$('.sigCollection').each(function () {
var sigvalue = $(this).find('.sigdata textarea').text();
var sigrovalue = $(this).find('.sigdata .ro').text();
if (sigvalue != '' || sigrovalue != '') {
var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
var $img = $('<img class=imported></img>');
$img.attr("src", decoded).appendTo($(this).find('.sigimage'));
$(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
$(this).find('.sigwarning').hide();
}
});
$('.donebutton').click(function () {
var section = $(this).closest('.sigCollection');
var sigdata = section.find('.signature').jSignature('getData');
section.find('.sigdata textarea').val(htmlEncode(sigdata));
var $img = $('<img class=imported></img>');
$img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
section.find('.sigwarning').hide();
});
$('.clearbutton').click(function () {
var section = $(this).closest('.sigCollection');
section.find('.signature').jSignature('clear');
});
});
It's a good idea to use the instructions in the BPM251 zip file to place the jSignatures library in your Forms Server directory and then call it in the code, instead of the dropbox as shown above.
