Signature Pad:捕获多个签名

Question

我正在使用Thomas J Bradley's Signature Pad，但需要它能够一次接受(并重新生成)两个(或更多)签名。不幸的是，现在，我只能让第一个canvas小部件接受签名-第二个canvas小部件没有响应。

也许我在Javascript部分做错了什么？

我需要更改什么才能让它在一个表单中接受两个签名？

<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>

提前谢谢你。

Answer 1

看起来你只需要在pads上有不同的类。而不是：

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

将第二个更改为：

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

在可下载的包中查看未记录的示例：https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html