jSignature copy svg information to form text field

[Muiter]

I have this script running, the user can place it's signature: https://willowsystems.github.io/jSignature/#/about
But I am not succeeding in getting the`svg` information that was generated copied to an text field so I can send it with this html form to my database.

    <div id="signature"></div>
    
    <textarea id="signature_svg" rows="5" cols="50"></textarea>
.

    <script src="vendor/jsignature/jSignature.min.js"></script>
    <script>
        $(document).ready(function() {
            var $sigdiv = $("#signature")
            
            $sigdiv.jSignature() // inits the jSignature widget.
            // after some doodling...
            $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it.
    
            // Getting signature as SVG and rendering the SVG within the browser. 
            // (!!! inline SVG rendering from IMG element does not work in all browsers !!!)
            // this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes]
            var datapair = $sigdiv.jSignature("getData", "svgbase64") 
            var i = new Image()
            i.src = "data:" + datapair[0] + "," + datapair[1] 
            $(i).appendTo($("#signature_svg")) // append the image (SVG) to DOM.
            
            $("#signature").bind('change', function(e){ document.getElementById('signature_svg').value; })
        })
    </script>

I am not detecting any errors in my *console*.

Any suggestions how to get the information of `signature` into `signature_svg` so I can send the form with this information?

Edited October 6, 2018 by Muiter

[Ingolme]

When you append a node to the textarea, it doesn't show anything, because the textarea only shows what is in its value attribute.

Instead, you can do this:

document.getElementById("signature_svg").value = datapair[1];

 

[Ingolme]

Actually, the main issue here is that there is no onchange event on div elements. You're either going to have to run a script periodically to check for changes or have a button that the user clicks to fill in the textarea. Either one of those two solutions would have to call a function like this one:

function updateTextarea() {
  document.getElementById("signature_svg").value = document.getElementById("signature").innerHTML
}

 

[Muiter]

17 hours ago, Ingolme said:

Actually, the main issue here is that there is no onchange event on div elements. You're either going to have to run a script periodically to check for changes or have a button that the user clicks to fill in the textarea. Either one of those two solutions would have to call a function like this one:

function updateTextarea() {
  document.getElementById("signature_svg").value = document.getElementById("signature").innerHTML
}

 

Thanks, this did do the trick for me:

<script>
    $(document).ready(function() {
        var $sigdiv = $("#signature")

        $sigdiv.jSignature() // inits the jSignature widget.
        // after some doodling...
        $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it.
    })
</script>

<script>
function copy()
{
    // signature
    var $sigdiv = $("#signature")
    var datapair = $sigdiv.jSignature("getData", "svgbase64") 
    document.getElementById("signature_svg").value = datapair[1];
}