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>

I have never heard of `formaction` but after a little try, I was able to determine that `formaction` does not care on what is `onclick` returning... — matiaslauriti, Aug 30 '19 at 03:33
I just found this: https://stackoverflow.com/questions/6493009/confirm-before-a-form-submit ... I will try this when I get home this evening. The "onsubmit" attribute of the
tag is what is being recommended. — thePITman, Aug 30 '19 at 12:28

score 1 · Answer 1 · answered Aug 30 '19 at 03:57

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.

answered Aug 30 '19 at 03:57

Poldo

1,924
1
11
27

That does not solve my problem. The issue is trying to get the on-click function to fire at all. It seems my
attribute is overriding any on-click function I specify, and I do not know how to work around it.
– thePITman Aug 30 '19 at 12:23
change button type instead of submit use button; – Poldo Sep 01 '19 at 00:52
Paul, your response above was partially correct. I was not able to simply "return confirm('message');". I had to store the Confirm response first, then act. However, there was more to the solution than just that, so I have included a more thorough response below. – thePITman Sep 01 '19 at 03:07

score 1 · Accepted Answer · answered Sep 01 '19 at 03:05

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.

Require Confirmation on Form Submission

2 Answers2