Require Confirmation on Form Submission

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

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.