Signature image saves the same incorrect image on each signing...

[restorepro]

The plugin works the first time you use it to capture a signature. But the very next signature that you capture will not be saved - the 1st signature saves for the 2nd signature. Any ideas on what is causing this? I am using this in a mvc project. The 1st time you capture a signature, everything works but the second and subsequent times the "Modal" doesn't "hide" and the 1st image is saved as well as the other "1st image data'... Any help would be greatly appreciated!

[thomasjbradley]

Do the input tags have different names?

[restorepro]

Yes, they all have names and Id's. It works fine on the 1st document signing... Really weird and probably something really simple...

[restorepro]

   @Using Html.BeginForm("viewName", "Controller, FormMethod.Post, New With {.enctype = "multipart/form-data", .id = "sigForm", .class = "sigPad", .data_ajax = "false"})
    @Html.ValidationSummary(True)
    @<input type="hidden" name="id" id="id" value="@ViewBag.Job_UUID"/>
    @<input type="hidden" name="formID" id="formID" value="@ViewBag.ReportID"/>
    @<label for="name">Print your name</label>
    @<input type="text" name="name" id="name" class="name" />
    @<label for="name">Drivers License #</label>
    @<input type="text" name="License" id="License" class="name" />
    @<p class="typeItDesc">
        Review your signature</p>
    @<p class="drawItDesc">
        Draw your signature</p>
    @<ul class="sigNav">
        <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
        <li class="drawIt"><a href="#draw-it">Draw It</a></li>
        <li class="clearButton"><a href="#clear">Clear</a></li>
    </ul>
    @<div class="sig sigWrapper">
        <div class="typed">
        </div>
        <canvas class="pad" width="490" height="155" id="Canvas_P" name="Canvas_P"></canvas>
        <input type="hidden" name="output" class="output" />
        <input type="hidden" name="imageData1" id="imageData1" />
    </div>
    @<button type="button" id="btnSave">
        I agree that I have read and accept the terms of this agreement.</button>
  End Using

[restorepro]

  <script type="text/javascript">
   $(document).ready(function () {
       var options = {
           lineTop: 145,
           lineMargin: 2
       };
       $('.sigPad').signaturePad(options);

       $("#btnSave").click(function () {
           var form = $("#sigForm");
           var image = document.getElementById("Canvas_P").toDataURL("image/png");
           image = image.replace('data:image/png;base64,', '');

           $('#imageData1').val(image).val;

           $.ajax({
               cache: false,
               async: true,
               type: "POST",
               url: form.attr('action'),
               data: form.serialize(),
               success: function (data) {
                   loadWorkAuthorizations();
                   toastr.success('Form Saved!');
                   $('#sketchModalNew').modal('hide');
                   updateBubbleCounts();
               }
           });

       });
   });

[restorepro]

Thanks for your response by the way!!

[restorepro]

        <HttpPost()> _
    Function signatureFunctionName(ByVal v2_Work_Authorization As v2_Work_Authorization, _
                                   Optional ByVal id As Guid = Nothing, Optional ByVal imageData1 As String = Nothing, _
                           Optional License As String = Nothing, Optional ByVal Name As String = Nothing _
                            , Optional ByVal formID As Guid = Nothing) As ActionResult

        Dim db As New floodpro2Entities
        Dim user__1 As v2_Users = db.v2_Users.Where...
        Dim rpt As v2_Reports_Text_Contents = db.v2_Reports_Text_Contents.Where...
        v2_Work_Authorization.Work_UUID = Guid.NewGuid()
        v2_Work_Authorization.Job_UUID = id
        v2_Work_Authorization.Technician = user__1.User_Name
        v2_Work_Authorization.Date_Time_Signed = Now
        v2_Work_Authorization.License_Num = License

        v2_Work_Authorization.Client_Name = Name
        v2_Work_Authorization.Work_Title = rpt.Report_Title
        v2_Work_Authorization.Doc_Name = "customDoc"
        v2_Work_Authorization.reportUUID = rpt.Report_UUID
        v2_Work_Authorization.Signature_Img = Convert.FromBase64String(imageData1)
        db.v2_Work_Authorization.AddObject(v2_Work_Authorization)
        db.SaveChanges()
        Dim result = New With {.success = "True"}
        Return Json(result)

    End Function

[thomasjbradley]

I unfortunately don't have any experience with .NET MVC.

Is it possible the code is keeping the information in the input after submission? Storing it in a session or something?

[restorepro]

That is what appears to be happening... I checked the data before submitting the form and data being sent to the controller was correct but the json response that was returned was the 1st signature. I cleared the cache and tried it and it worked correctly but the very next time it will return the 1st signature. I am stumped. I even tried to remove the data from the dom after submitting the form and it still doesn't work.

[restorepro]

Hello Thomas, i found the issue and fixed it. I had change the way that I closed my modal... I needed to use jquery.remove instead of "hide" as you can see below. Thanks for your assistance! $.ajax({ cache: false, async: true, type: "POST", url: form.attr('action'), data: form.serialize(), success: function (data) { loadWorkAuthorizations(); toastr.success('Form Saved!'); // $('#sketchModalNew').modal('hide'); $('#sketchModalNew').remove(); // this line fixed it, i commented out the line above updateBubbleCounts(); } });

[thomasjbradley]

Glad to hear you figured it out!