Require Confirmation on Form Submission - laravel

Question

I am having trouble using a Confirm pop-up when a user clicks a button.
Use-case #1: On Update button, require confirmation when form fields meet certain conditions. (See formSubmit() function.) Currently, when a user clicks the Update button, it successfully executes the "games/update" action (a Laravel route) as specified in the Form tag. I just can't get the function to fire.
Use-case #2: On Delete button, Require confirmation. (See formDelete() function.) Currently, when a user clicks the Delete button, it successfully executes the "games/delete" action (a Laravel route) as specified in the Delete button. Again, I just can't get the function to fire.
Form HTML:
<form method="post" action="/games/update" enctype="multipart/form-data">
<select id="status" class="form-control" name="status" required>
<option value="FINAL" selected>Final Score</option>
<option value="POSTPONED">Postponed</option>
<option value="OTHER">Not Final</option>
</select>
<input type="number" name="awayScore" id="awayScore" class="form-control" required/>
<input type="number" name="homeScore" id="homeScore" class="form-control" required/>
<button type="submit" id="updateBtn" onClick="formSubmit()" class="btn btn-primary pull-left">Update Game</button>
<button type="submit" id="deleteBtn" onClick="formDelete()" formaction="/games/delete" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
<script>
function formSubmit() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
return confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
}
else
{
return true;
}
}
function formDelete() {
return confirm("Are you sure you want to delete this game?");
}
</script>

Answer 1

Get the result once you click the button from confirm dialog.
var result = confirm("Are you sure you want to delete this game?");
if (result) {
//Logic goes here
}
Also check this: https://sweetalert2.github.io/ you can have customizable popup based on your need.

Answer 2

SOLVED!
First, instead of using an "onclick" on the BUTTON, I needed an "onsubmit" on the FORM tag (per my comment on the opening post).
And second, since I wanted the DELETE button to always fire a Confirm message but the UPDATE button to only fire a Confirm message in certain situations, I just separated the Delete button into its own form (since the form input fields were not relevant if user was deleting the record).
HTML:
<form method="post" action="/games/update" onsubmit="return validateForm()" enctype="multipart/form-data">
... all form fields ...
<button type="submit" id="updateBtn" class="btn btn-primary pull-left">Update Game</button>
</form>
<form method="post" action="/games/delete" onsubmit="return confirm('Are you sure you want to delete this game?');" enctype="multipart/form-data">
<button type="submit" id="deleteBtn" class="btn btn-danger pull-right">Delete Game</button>
</form>
Javascript:
function validateForm() {
var status = document.getElementById('status').value;
var awayScore = document.getElementById('awayScore').value;
var homeScore = document.getElementById('homeScore').value;
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
var result = confirm("You have entered a FINAL SCORE of 0-0. If this is correct, click OK. If not, click Cancel and update the Status / Score.");
if (result) {
return true;
}
else {
return false;
}
}
else
{
return true;
}
}
I tried that a hundred ways, and it would never fire my function (onsubmit="validateForm()") but it would fire a simple return (onsubmit="return confirm('message')"). Finally, I found that the reason it was not firing my function is because I had a syntax problem in my function's IF statement, which must have been causing the entire function to be invalid. So I changed it:
From:
if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {
To:
if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {
I also found that a simple "return confirm('message');" did not work. I had to store the results of the Confirm message and then return true/false.