2017-09-28 123 views
0

我正在處理我的項目中名爲「jsignature」的簽名捕獲插件。 我想添加它作爲我的形式下面的字段之一。 enter image description hereJavaScript - 如何自定義jsignature功能?

但我不想在表單中使用點擊函數以及textarea。只有更改簽名和提交數據才能保存在帖子中。我想用javascript來定製這個,不幸的是,我試圖弄清楚這一點。

我的代碼如下所示:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<!-- jQuery --> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
<script 
    src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jSignature.min.js"></script> 

<!--[if lt IE 9]> 
<script type="text/javascript" src="libs/flashcanvas.js"></script> 
<![endif]--> 

<!-- jSignature --> 
<style> 
#signature { 
    width: 100%; 
    height: auto; 
    border: 1px solid black; 
} 
</style> 
<form method="post" action="test.php"> 
    <!-- Signature area --> 
    <div id="signature"></div> 
    <br /> <input type='button' id='click' value='click'> 
    <textarea id='output' name='sig'></textarea> 
    <br /> 

    <!-- Preview image --> 
    <img src='' id='sign_prev' style='display: none;' /> <input 
     type="submit" name="submit"> 
</form> 
<!-- Script --> 
<script> 
    $(document).ready(function() { 

     // Initialize jSignature 
     var $sigdiv = $("#signature").jSignature({ 
      'UndoButton' : true 
     }); 
     true 
     $('#click').click(function() { 
      // Get response of type image 
      var data = $sigdiv.jSignature('getData', 'image'); 

      // Storing in textarea 
      $('#output').val(data); 

      // Alter image source 
      $('#sign_prev').attr('src', "data:" + data); 
      $('#sign_prev').show(); 
     }); 
    }); 
</script> 
</html> 

我不知道在哪裏更改代碼。我想在提交表單之後將數據保存在數據庫中,而不需要任何textareas和單擊按鈕。有人可以給我一個帖子,教程或一些幫助嗎?

回答

1

我想這是你在找什麼

<script> 
     $(document).ready(function() { 
      // Initialize jSignature 
      var $sigdiv = $("#signature").jSignature({ 
       'UndoButton' : true 
      }); 
      true 

      $('#signature').change(function() {  
       var data = $sigdiv.jSignature('getData', 'image'); 
       // Storing in textarea 
       $('#output').val(data); 

       // Alter image source 
       $('#sign_prev').attr('src', "data:" + data); 
       $('#sign_prev').show(); 
      }); 
     }); 
    </script> 
+1

Thanks.just現在我。我試圖與change.anyway答案謝謝 –