Okay so I’m having some trouble here. I’m new to JS so my experience with Javascript is vague. I’m trying to submit a signature to a hidden element on the form I have set up. Right now, all it’s doing is submitting it to the page itself as shown here
I want it to where it posts to the form data as a hidden element so when it sends the data, it will upload it as an image.
Below is the code I have right now:
signature.js:
const canvas = document.querySelector('canvas');
const form = document.querySelector('.signform');
const clearButton = document.querySelector('.clear-button');
const ctx = canvas.getContext('2d');
let writingMode = false;
const handlePointerDown = (event) => {
writingMode = true;
ctx.beginPath();
const [positionX, positionY] = getCursorPosition(event);
ctx.moveTo(positionX, positionY);
}
const handlePointerUp = () => { writingMode = false;}
const handlePointerMove = (event) => { if (!writingMode) return
const [positionX, positionY] = getCursorPosition(event); ctx.lineTo(positionX, positionY); ctx.stroke();}
const getCursorPosition = (event) => { positionX = event.clientX - event.target.getBoundingClientRect().x; positionY = event.clientY - event.target.getBoundingClientRect().y;
return [positionX, positionY];
}
ctx.lineWidth = 2;
ctx.lineJoin = ctx.lineCap = 'round';
form.addEventListener('submit', (event) => { event.preventDefault();
const imageURL = canvas.toDataURL();
const image = document.createElement('img'); image.src = imageURL; image.height = canvas.height; image.width = canvas.width; image.style.display = 'block'; form.appendChild(image); clearPad();})
const clearPad = () => { ctx.clearRect(0, 0, canvas.width, canvas.height);}
clearButton.addEventListener('click', (event) => { event.preventDefault(); clearPad();})
canvas.addEventListener('pointerdown', handlePointerDown, {passive: true});
canvas.addEventListener('pointerup', handlePointerUp, {passive: true});
canvas.addEventListener('pointermove', handlePointerMove, {passive: true});
previewlease.php:
<p align='center'>Landlord Signature:</p>
<center><canvas height="100" width="300" class="signature-pad"></canvas>
<p><a href="#" class="clear-button">Clear</a></p>
<input type="hidden" name="signature" /></center><br>
<button class='btn btn-primary'>Submit to Tenant</button>
I want to be able to let the code submit to the <input type="hidden" name="signature" /> then have it post it on the next page.
Any idea I need to do to be able to make this possible?
I tried changing this but it didn’t work:
const imageURL = canvas.toDataURL();
//const image = document.createElement('img');
//image.src = imageURL; image.height = canvas.height; image.width = canvas.width; image.style.display = 'block';
const input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "signature");
input.setAttribute("value", imageURL);
document.getElementById("signform").appendChild(input);
