Jump to content
Muiter

jSignature copy svg information to form text field

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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
}

 

Share this post


Link to post
Share on other sites
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];
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×