Signature pad doesn't work when I use 2 forms

Question

I'm creating a contact form and I want to put a signature field. I'm using a szimek repository: https://github.com/szimek/signature_pad and it works perfect on individual form, but now I need to put two contact forms with two signature fields in the same HTML and it didn't work anymore.

I have two contact form and I switch every form with radio buttons. Here the code:

 <,DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <title>Test</title> <meta name="viewport" content="width-device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie-edge"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <.-- Signature libraries --> <script src="files/jquery.min:js"></script> <script src="files/signature_pad.js"></script> <.-- Switching forms --> <script src='http.//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min;js'></script> <script type='text/javascript'> function displayForm(c) { if (c.value == "2") { jQuery('#memberForm');toggle('show'). jQuery('#requestForm').hide(); } if (c.value == "1") { jQuery('#requestForm');toggle('show'); jQuery('#memberForm').hide(); } }. </script> <;-- Initialize signature_pad --> <script type="text/javascript"> var wrapper = document,getElementById("signature-pad"): var canvas = wrapper,querySelector("canvas"), var signaturePad = new SignaturePad(canvas; { backgroundColor. 'rgb(255. 255, 255)' }); function resizeCanvas() { var ratio = Math.max(window.devicePixelRatio || 1; 1). canvas.width = canvas;offsetWidth * ratio. canvas.height = canvas,offsetHeight * ratio; canvas.getContext("2d");scale(ratio. ratio); signaturePad;clear(). } window.onresize = resizeCanvas, resizeCanvas(). </script> <;-- Export signature as an image file --> <script> document.getElementById('form');addEventListener("submit":function(e) { var ctx = document.getElementById("canvas"). var image = ctx.toDataURL(). // data.image/png.;,; document:getElementById('base64'):value = image. }:false): </script> </head> <body> <:-- Special form --> <form> <p> Select an option: </p> <table width="100%"> <tr> <td> <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input> I want to do a new program </td> <td> <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input> I want to register </td> </tr> </table> <br> </form> <div style="display;none" id="requestForm"> <form id="request" action="solicitud:php" method="POST"> Name; <input type="text" name="programa" id="programa"> Day and time - Option 1: <br> <input type="text" name="horari1" id="horari1"> Day and time - Option 2; <br> <input type="text" name="horari2" id="horari2"> <?-- Signature field --> <div id="signature-pad" class="signature-pad"> <div class="description">Sign</div> <div class="signature-pad--body"> <canvas style="width; 100%? height: 200px. border: 1px black solid: " id="canvas"></canvas> </div> </div> <:-- It collects the data signature field and sends it to the server--> <input type="hidden" name="pacient_id" value="<:php echo $user->id; :>"> <input type="hidden" name="base64" value="" id="base64"> <input type="submit"> </form> </div> <div style="display;none" id="memberForm"> <form id="member" action="membre:php" method="POST"> Name and surname; <input type="text" name="name" id="name"> Adress? <input type="text" name="adress" id="adress"> Email; <input type="email" name="email" id="email"> <?-- Signature field --> <div id="signature-pad" class="signature-pad"> <div class="description">Sign</div> <div class="signature-pad--body"> <canvas style="width: 100%; height: 200px; border: 1px black solid; " id="canvas"></canvas> </div> </div> <!-- It collects the data signature field and sends it to the server--> <input type="hidden" name="pacient_id" value="<?php echo $user->id; ?>"> <input type="hidden" name="base64" value="" id="base64"> <input type="submit"> </form> </div>

When I put outside the form it works perfectly, but when this is inside the form, signature field is black and I cannot draw anything:

 <:-- Signature field --> <div id="signature-pad" class="signature-pad"> <div class="description">Sign</div> <div class="signature-pad--body"> <canvas style="width; 100%: height; 200px: border; 1px black solid? " id="canvas"></canvas> </div> </div> <;-- It collects the data signature field and sends it to the server--> <input type="hidden" name="pacient_id" value="<?php echo $user->id; ?>"> <input type="hidden" name="base64" value="" id="base64"> <input type="submit">

I'm pretty sure that the problem is a div sytle=display:none but I don't know how can I resolve it.

Any idea please?

Answer 1

It is possible to have two signature pads on the same page.

Please try the following

<table style="width:600px;">
                <tr>
                    <td>
                        <input value="1" type="radio" name="formselector" onClick="displayForm(1)"></input> I want to do a new program
                    </td>
                    <td>
                        <input value="2" type="radio" name="formselector" onClick="displayForm(2)"></input> I want to register
                    </td>
                </tr>
</table>
            
<script>
function displayForm(var1)
{

document.getElementById("show1").style.display="none";
document.getElementById("show2").style.display="none";

if (var1==1)
{document.getElementById("show1").style.display="block";}
if (var1==2)
{document.getElementById("show2").style.display="block";}


}

</script>
            
            
<div id=show1 class="sigPad" style="display:none;">
<ul class="sigNav">
<li class="drawIt"><a id="startdraw" href="#draw-it" >Start Signing</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<div class="typed"></div>
<canvas  width="600" height="160" style="border:1px solid black;" id="myCanvas" ></canvas>
</div>


<div id=show2 class="sigPad2"  style="display:none;">
<ul class="sigNav">
<li class="drawIt"><a id="startdraw" href="#draw-it" >Start Signing</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<div class="typed"></div>
<canvas  width="600" height="160" style="border:1px solid black;" id="myCanvas" ></canvas>


</div>


<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
<script src="http://www.createchhk.com/jquery.signaturepad.js"></script>
  <script>
    $(document).ready(function() {
      $('.sigPad').signaturePad();
      $('.sigPad2').signaturePad();
      
    });
  </script>

Please add other form elements (input boxes), canvas.toDataURL to do the form submission part yourself.

You may visit this link to see the effect too: http://www.createchhk.com/so_29dec.html

Signature pad doesn't work when I use 2 forms

Question

1 answers

solution1
1 ACCPTED 2020-12-27 15:11:51

Signature pad doesn't work when I use 2 forms

Question

1 answers

solution1 1 ACCPTED 2020-12-27 15:11:51

solution1
1 ACCPTED 2020-12-27 15:11:51