签名板:捕获多个签名

Question

我正在使用Thomas J Bradley的签名板，但需要它能够一次接受（并重新生成）两个（或更多）签名。不幸的是，现在，我只能让第一个画布小部件接受签名——第二个画布小组件没有响应。

也许我在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

看起来你只需要在pad上有不同的类。代替：

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

将第二个更改为：

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

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