フォームが送信されたときに署名を保存する

Question

jSignatureプラグインを使用してシンプルなブートストラップモーダルウィンドウにシグネチャキャプチャを追加しています - シグネチャキャプチャが正しく表示され、問題なくシグネチャを描画して保存できます。ここでは、アクション内の署名モーダルウィンドウを示すスクリーンショットです：

現時点では、ユーザーはそれを保存するための署名下記の[保存]ボタンをクリックして自分の署名を入力する必要があります。彼らはその後、データベースを更新するフォームを送信するボタンをクリックして提出しなければならないなど

ここでモーダルウィンドウのHTMLコードです：

<div class="modal" id="myModal"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Approver Signature</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 

 
     <form id="saveEvent" action="update.php" method="post"> 
 
      <div class="form-group"> 
 
      <input type="hidden" name="id" value="123456"> 
 
      <input type="hidden" id="hiddenSigData" name="hiddenSigData" /> 
 
      <label for="yourName">Approver Name</label> 
 
      <input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit"> 
 
      <label for="managerNotes">Approver Notes</label> 
 
      <input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value=""> 
 
      </div> 
 

 

 
      <div class="form-group"> 
 
      <label for="yourSignature">Approver Signature</label> 
 
      <div id="signature"></div> 
 
      <button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button> 
 
      <button type="button" class="btn btn-primary" id="btnSave">Save</button> 
 
      </div> 
 

 

 

 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
      <button type="submit" class="btn btn-success">Submit</button> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
    </div> 
 
    <!-- /.modal -->

我々は彼らに多くのユーザーを発見しました保存ボタンをクリックして最初に署名を保存し、フォームを提出する「提出」ボタンをクリックするだけで、署名をもう一度も受け取ることができない瞬間に気付くはずです。ここで

は署名保存]ボタンをクリックしたときに実行されるJavaScriptのだ：

$(document).ready(function() { 
 
    $('#btnSave').click(function() { 
 
    var sigData = $('#signature').jSignature('getData', 'default'); 
 
    $('#hiddenSigData').val(sigData); 
 
    console.log('jSignature saving signature'); 
 
    }); 
 

 
})

私たちは、自動的に署名を保存するには、[送信]ボタンが押された場合、方法を探しています最初にフォームを送信してください。これが可能かどうか、またはこれを達成する方法は不明です。

Answer 1

イベントハンドラを使用できます。

$("#saveEvent").submit(function(){ 
    var sigData = $('#signature').jSignature('getData', 'default'); 
    $('#hiddenSigData').val(sigData); 
    console.log('jSignature saving signature'); 
}); 

完了です！