Adding Submit button on the second page did not work - html

Question

I am working on a demo project that uploads a photo and returns with the name of the person. So basically I use HTML and it consists of 2 pages, the first page - for users to upload photos and submit it while the second page - the recognized name in the photo will be shown. I have a web service that I need to enable it for face recognition to work. The first page has a submit button, which is to upload the photo, but I wanted the submit button to be on the second page as well so that the users can submit another photo, without the need to go back to the first page. I copied the HTML code in the first page to second page,
<form>
<div class="upload-btn-wrapper">
<button class="btn">Submit</button>
</div>
</form>
the structure of the submit button is there. But it doesn't work, while it worked for the first page, it did not work on the second page. What could be the problem? Let me know if u need more clarification I would be happy to do so
The Code for the first page
Page 1
The Code for the second page
Page 2
The codes for both pages are almost the same.

Answer 1

You need to add condition when you are submitting and action attribute as well where you want to submit.
<form action="upload.php">
<input type="file" name="file" id="uploadFile" />
<div class="upload-btn-wrapper">
<button type="submit" class="btn">Submit</button>
</div>
</form>
for validation, you need to add some jquery code
$(document).on("click", ":submit", function (e) {
if( document.getElementById("uploadFile").files.length == 0 ){
alert("no files selected"); // or you can use other approach
e.preventDefault();
}
}