Help with Multiple Signatures

[radman63]

I'm implementing a document management system that requires a form to get data into the system, and then an internal form to display it. That's just the way it works. I've successfully used a single signature pad in this environment, but multiple signature pads (I need three of them) are causing me problems. The front-end capturing of multiple signatures seems to be working, bit it's the regeneration/display on the back-end that I am having trouble with.

When using only one signature pad, the class is part of the form element, but that caused problems using multiple signature pads. A previous post of yours showed how removing it from the form element and putting it in a div solved that particular issue. That has already been done here.

I'm not a programmer, so I learn and work best by examples, and/or by modifying existing work. I hope you can help me if I paste relevant parts of both the internal and external forms. Thanks.

EXTERNAL CAPTURE OF SIGNATURES: SCRIPT <script> $(document).ready(function() { var options = { bgColour : '#f0f0f5', drawOnly : true, penColour: '#0087bb', lineTop: 65 }; $('.sigPad').signaturePad(options); }); </script>

FORM <form action="https://tcc.filebound.com/process/html2eform.ashx" method="post" name="eForm" id="eForm" class="form-horizontal">

HTML `

<p class="clearButton btn btn-info col-sm-2"><a href="#clear" style="text-decoration: none; color: #EEEEEE;">Clear Signature</a></p>`

`

<p class="clearButton btn btn-info col-sm-2"><a href="#clear" style="text-decoration: none; color: #EEEEEE;">Clear Signature</a></p>`

`

<p class="clearButton btn btn-info col-sm-2"><a href="#clear" style="text-decoration: none; color: #EEEEEE;">Clear Signature</a></p>`

INTERNAL DISPLAY OF SIGNATURES: SCRIPT <script> $(document).ready(function(){ var options = { bgColour : '#ffffff', drawOnly : true, penColour: '#0087bb', lineTop: 65, displayOnly: false }; var sig = $$output$$; $('.sigPad').signaturePad(options).regenerate(sig) }) </script>

HTML (The first signature uses the default name and id when I need to use just one pad. The second and third pads use what I think the name and id should be. They may all be wrong.)

`Supervisor's Signature:

    <canvas class="pad" width="350" height="96" style="left: 0px; top: 0px"></canvas>

Employee's Signature:

    <canvas class="pad" width="350" height="96" style="left: 0px; top: 0px"></canvas>`

`Witness Signature:

    <canvas class="pad" width="350" height="96" style="left: 0px; top: 0px"></canvas>`

[thomasjbradley]

So, I see that you have 3 different <form> tags but, the <canvas> tag isn't inside the form, it seems to close on the line above. This is what we should see:

<label for="signature">Supervisor's Signature:</label>
<form action="$$URL$$" method="post" name="eForm" id="eForm" class="sigPad">
  <canvas class="pad" width="350" height="96" style="left: 0px; top: 0px"></canvas>
</form>

Notice the closing </form> after the <canvas>.

---

The second problem is that we'd need three copies of the Javascript to regenerate signatures, like this:

var sig = $$output$$;
$('.sigPad').signaturePad(options).regenerate(sig);

var sig2 = $$output$$;
$('.sigPad2').signaturePad(options).regenerate(sig2);

var sig3 = $$output$$;
$('.sigPad3').signaturePad(options).regenerate(sig3);

And make sure that all 3 of the <form> tags have different classes on them.

[radman63]

Thank you for your help. I made the changes you requested, but I am still getting an error.

Line: 23 Char: 6 Unable to get property "regenerate" of undefined or null reference.

I then made some changes on the external form, but I'm sure my changes only made things worse. It's probably better if I give you links to copies of the internal and external forms, rather than try to paste sections here. I just messed up the URL of the form handler of the external form so this can't actually be submitted.

External Form: http://tcci.us/fb/employee-warning-notice-test.html Internal Display Form: http://tcci.us/fb/employee-warning-internal.html

One specific thing that is confusing me is where to specify and pull the individual signatures. In other words, do I give them unique names and then display those names based on what I put into the tag, or the tag?

Usually, I use the "name" as a variable with which to display a form element, but in the case of the sigpad, I'm not sure if this equates to the canvas tag or the input tag. I hope that makes sense. Thanks again.

[thomasjbradley]

For the error message you're seeing, I think it's because I can't find an element with the class of just .sigPad.

---

For the form submission, it's the <input> inside signature pad that actually captures what should be submitted and saved.