我正在使用 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">×</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');
});
})
我们正在寻找一种方法,当按下“提交”按钮时,首先自动保存签名,然后提交表单。不确定这是否可行或如何实现?
最佳答案
您可以使用事件处理程序。
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
你已经完成了!
关于javascript - 提交表格时保存签名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42882994/