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

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


先感谢您。

最佳答案

看来您只需要在垫上设置不同的类即可。
代替:

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


将第二个更改为:

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


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

10-07 19:49
查看更多