提交表单时保存签名

Question

我正在使用 jSignature 插件将签名捕获添加到一个简单的 Bootstrap 模式窗口 - 签名捕获正确显示，我可以毫无问题地绘制和保存签名。这是一个显示正在运行的签名模式窗口的屏幕截图：

目前用户必须输入他们的签名，然后单击签名下方的保存按钮才能保存。然后他们必须点击提交按钮来提交更新数据库等的表单。

这是模态窗口的 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');
});

你已经完成了！