Question 10877 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Canvas image toDataURL in hidden input not working on the click of submit – Jquery

I am trying to put the value of canvas pad in a Hidden input field when the user clicks the submit button. On the click of the submit button, the value does not go to the hidden input. Here is what I have on my web page

<script type="text/javascript">
            $(document).ready(function () {
                $('#myBtn1').click(function (event) {
    
                     var canvas = document.querySelector('#colors_sketch');
                   
                    var pad = new SignaturePad(canvas);
                    var data = pad.toDataURL();
                  
                    $('#savetarget').attr('src', data);
                    $('#SignatureDataUrl').val(data);
                    pad.off();
       });
            });
        </script>
 <canvas id="colors_sketch" width="500" height="200" style="border: 1px solid #ccc;"></canvas>
    <input type="hidden" asp-for="SignatureDataUrl">
    <input style="float: right; margin-bottom:20px" type="submit" id="myBtn1" value="Submit" class="btn btn-primary"  />

This is the rendered HTML for SignatureDataUrl

<input type="hidden" id="SignatureDataUrl" name="SignatureDataUrl" value="">

when I click the submit button, I don’t see any value in SignatureDataUrl. Any help will be greatly appreciated.

Tags:

2

Answers


  1. 0

    UPDATE:

    Have you got the last version of this library? I saw that there was an open issue (fixed 4 months ago) about empty data returned from toDataUrl() method. Try to specify the type like this: .toDataUrl("image/png")

    Also, try to create the SignaturePad object outside the click listener, in the document.ready() callback:

    <script type="text/javascript">
        $(document).ready(function () {
            var canvas = document.querySelector('#colors_sketch');   
            var pad = new SignaturePad(canvas);
            
            $('#myBtn1').click(function (event) {
                var data = pad.toDataURL();
              
                $('#savetarget').attr('src', data);
                $('#SignatureDataUrl').val(data);
                pad.off();
            });
        });
    </script>

    OLD ANSWER:

    asp-for is an ASP.NET Tag Helper that will add id and name attributes to your HTML tag, but it works only server-side.

    If you see asp-for in your rendered HTML, this means that id and name were not generated. That’s why the jQuery selector won’t work.

    Try to add id="SignatureDataUrl" to your hidden input.

    <input type="hidden" id="SignatureDataUrl">
    Login or Signup to reply.
  2. 0

    I have fixed this in this link

    // correction
<input type="hidden" id='SignatureDataUrl' asp-for="SignatureDataUrl">

    The issue was, you are accessing an id=’SignatureDataUrl’ but it wasn’t defined

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search