Signature Pad: Capturing more than one signature

Question

I am using Thomas J Bradley's Signature Pad, but need it to be able to accept (and regenerate) two (or more) signatures at a time. And unfortunately, right now, I can only get the first canvas widget to accept a signature - the second canvas widget is unresponsive.

Maybe I'm doing something wrong in the Javascript section?

What do I need to change to make it accept two signatures in one form?

<form method="post" action="" class="sigPad"> 

<b>Signature 1:</b>
<br />

<ul class="sigNav">
    <li class="clearButton"><a href="#clear">Clear Signature</a></li>
</ul>
<div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad_1" width="490" height="130"></canvas>
    <input type="hidden" name="signature_pad_output_1" class="output_1">
</div>

<br>
Typed Name: <input type="text" name="signature_name_1" value="" id="name_1" class="name_1">

<hr>

<b>Signature 2:</b>
<br />

<ul class="sigNav">
    <li class="clearButton"><a href="#clear">Clear Signature</a></li>
</ul>
<div class="sig sigWrapper">
    <div class="typed"></div>
    <canvas class="pad_2" width="490" height="130"></canvas>
    <input type="hidden" name="signature_pad_output_2" class="output_2">
</div>


<br>
Typed Name: <input type="text" name="signature_name_2" value=""  id="name_2" class="name_2">



<script>
    $(document).ready(function() {

        var options = {
            lineTop: 100
                    , drawOnly: true
                    , canvas: '.pad_1'
                    , output: '.output_1'
                    , name: '.name_1'
        };

        $('.sigPad').signaturePad(options);

        var options = {
            lineTop: 100
                    , drawOnly: true
                    , canvas: '.pad_2'
                    , output: '.output_2'
                    , name: '.name_2'
        };

        $('.sigPad').signaturePad(options);


    });
</script>          

<script src="/includes/signature-pad/build/json2.min.js"></script>


</form>

Thank you in advance.

Answer 1

It looks like you just need to have different classes on the pads. Instead of:

⋮
$('.sigPad').signaturePad(options);
⋮
$('.sigPad').signaturePad(options);
⋮

Change the second one to:

$('.sigPad2').signaturePad(options);

Check out the undocumented example in the downloadable package here: https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html