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?
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