当我使用 2 种形式时，签名板不起作用
Signature pad doesn't work when I use 2 forms
我正在创建一个联系表单，我想放置一个签名字段。我正在使用 szimek 存储库：
https://github.com/szimek/signature_pad 并且它在 div idual 表单上工作完美，但现在我需要将两个带有两个签名字段的联系表单放在同一个 HTML 并且它不再工作了。
我有两个联系表单，我用单选按钮切换每个表单。这里的代码：
<!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>
当我放在表格外面时，它工作得很好，但是当它在表格里面时，签名字段是黑色的，我不能画任何东西：
<!-- 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">
我很确定问题出在 div sytle=display:none 但我不知道如何解决它。
有什么想法吗？
同一页上可以有两个签名板。
请尝试以下操作
<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>
请添加其他表单元素（输入框），canvas.toDataURL自己做表单提交部分
你也可以访问this link看看效果：
http://www.createchhk.com/so_29dec.html
我正在创建一个联系表单，我想放置一个签名字段。我正在使用 szimek 存储库： https://github.com/szimek/signature_pad 并且它在 div idual 表单上工作完美，但现在我需要将两个带有两个签名字段的联系表单放在同一个 HTML 并且它不再工作了。
我有两个联系表单，我用单选按钮切换每个表单。这里的代码：
<!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>
当我放在表格外面时，它工作得很好，但是当它在表格里面时，签名字段是黑色的，我不能画任何东西：
<!-- 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">
我很确定问题出在 div sytle=display:none 但我不知道如何解决它。
有什么想法吗？
同一页上可以有两个签名板。
请尝试以下操作
<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>
请添加其他表单元素（输入框），canvas.toDataURL自己做表单提交部分
你也可以访问this link看看效果：
http://www.createchhk.com/so_29dec.html