How do I submit data to a hidden form field rather than submitting it on DOM?

Question

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);