簽名墊：捕獲多個簽名

Question

我正在使用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> 

在此先感謝您。

Answer 1

它看起來像你只需要在墊上有不同的類。 相反的：

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

更改第二個到：

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

檢查出無證例如在可下載的包在這裏： https://github.com/thomasjbradley/signature-pad/blob/master/examples/accept-multiple-signatures.html