In a web application I’m developing, it requires the end user (our client) to digitally sign a form. I’m currently using the jquery plugin jsignature as a signature pad. I’m able to get it to work in Laravel. (code shown below) When the submit button is clicked it passes the image goes back to the SignaturePadController as a base64 encoded string. How would I turn this into a livewire component?
<form id="sigForm" method="post" action="{{ route('signature') }}">
@csrf
<input type="hidden" id="sigData" name="sigData" value=""/>
<div id="signatureParent" class="form-group">
<div id="signature" style="border:1px #d3d3d3 solid;"></div>
<button type="button"
id="clear"
class="btn btn-danger mt-2 mb-2"
onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="submit"
id="btnSave"
class="btn btn-success">Save</button>
<br/>
<textarea id="output" rows="5" cols="50"> </textarea><br/>
<img src="" id="sigPreview" alt="">
</div>
</form>
<script>
$(document).ready(function() {
let $sig = $("#signaturePad").jSignature({syncField: '#output', syncFormat: 'PNG'});
$('#btnSave').on('click', function (e) {
e.preventDefault();
// Get the signature pad data -
let sigData = $('#signature').jSignature('getData', 'default');
// Set the hidden field value with the value from the sigData variable.
$('#sigData').val(sigData);
// Set the textarea field value with the value from the sigData variable.
//$('#output').val(sigData);
// Set the image source property with the textarea content.
let sigPreview = $('#sigPreview');
sigPreview.attr('src', sigData);
console.log(sigData);
});
})
</script>