【发布时间】：2020-12-27 14:28:16
【问题描述】：
我正在创建一个联系表单，我想放置一个签名字段。我正在使用 szimek 存储库： https://github.com/szimek/signature_pad 它在单个表单上运行完美，但现在我需要将两个带有两个签名字段的联系表单放在同一个 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 但我不知道该如何解决。
有什么想法吗？
【问题讨论】：
标签： javascript forms signaturepad