How do I get a script to run after a button is pressed on an HTML form but before the form is submitted?

Forewarning: I am new in understanding the concepts and workings of html, javascript, and php so I apologize in advance if there are blaring logic issues with this code.

I am currently implementing javascript from StudyTonight.com to capture a photo with my webcam. My goal is to take the resulting photo, convert it to base64, and uploaded it to a text file.

Below is a snippet of the implementation of the photo capturing feature (Full implementation can be found in the hyperlink)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

/* JS comes here */
(function() {
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();

<!-- language: lang-html -->

<div class="contentarea">
<label for="Container Image">Chip Container Images (Take Picture with Chip Exposed for Already Opened Containers):</label>
<br><br>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<div><button id="startbutton">Take photo</button></div>
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>

<!-- end snippet -->

I tried to utilize the following script to attempt to take the value of the photo and save it to an input. This script would have been placed directly after the picture-taking script but before the submit button.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script>
var photo = document.getElementById("photo");
var photoBase64 = photo.src;
document.write("<input type = 'hidden' name = 'photo' value = '" + photoBase64 + "'>");
</script>

<!-- end snippet -->

Then, utilizing .php, I would save the input, "photo", to a variable and write it to a txt file.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->

<?php
//Create a variable for the photo
$photo = $_POST['photo'];
$file = fopen("log.txt", "a");
fwrite($file, $photo . "\n");
fclose($file);
?>

<!-- end snippet -->

The result was that the log.txt file came out after empty after pressing the submit file due to what I assume is the photo not being taken until after the submit button is pressed while the value of 'photo' is being written to the log.txt file before the photo is taken. I've experimented around with the placement of the photo-saved-to-input script around the code but received similar results. I am finding myself more and more confused in understanding the behavior of a script depending on the location of its declaration.

What I would like to know is:

1. Is my suspicion correct?
2. Is my approach with utilizing a script to save the value of photo logical to begin with?
3. If it is logical, is my issue a matter of script placement that is preventing the code from working as intended or something else?

Any and all help would be much appreciated.

This is a bit over-engineered, and isn't doing what you think:

var photo = document.getElementById("photo");
var photoBase64 = photo.src;
document.write("<input type = 'hidden' name = 'photo' value = '" + photoBase64 + "'>");

1. This code executes immediately when the page loads, so it will use the src value that exists when the page loads (which doesn't exist).

2. These three lines of code do nothing but create an element. Which you could do by just... creating an element:

   <input type="hidden" name="photo" value="">
   

Simply create the element on the page where you want it. As for populating the element with a value, you would want to do that after creating the value, which appears to be in the takepicture function:

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);

If data is the value you want, that's where you'd use it:

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
document.querySelector('input[name="photo"]').value = data;