javascript - Save Signature when Form is Submitted

Question

I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:

At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.

Here's the html code for the modal window:

<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 -->

We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.

Here's the Javascript that runs when the signature Save button is clicked:

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

})

We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?

Answer 1

您可以使用事件处理程序。

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

你完成了！