要求确认提交表格答案

【问题标题】：Require Confirmation on Form Submission要求确认提交表格
【发布时间】：2020-01-03 07:13:48
【问题描述】：

当用户单击按钮时，我无法使用确认弹出窗口。

用例 #1： 在更新按钮上，当表单字段满足特定条件时需要确认。（参见 formSubmit() 函数。）目前，当用户单击更新按钮时，它成功执行了 Form 标签中指定的“游戏/更新”操作（Laravel 路由）。我只是无法触发该功能。

用例 #2： 在删除按钮上，需要确认。（参见 formDelete() 函数。）目前，当用户单击 Delete 按钮时，它会成功执行 Delete 按钮中指定的“游戏/删除”操作（Laravel 路由）。同样，我就是无法触发该函数。

表单 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>

【问题讨论】：

我从未听说过formaction，但经过一番尝试，我能够确定formaction 并不关心onclick 返回的内容...
我刚刚找到了这个：stackoverflow.com/questions/6493009/… ...我今晚回家后会试试这个。
标签的“onsubmit”属性是推荐的。

标签： laravel forms submit confirm

【解决方案1】：

单击确认对话框中的按钮后获取结果。

var result = confirm("Are you sure you want to delete this game?");
if (result) {
    //Logic goes here
}

另外检查一下：https://sweetalert2.github.io/ 您可以根据需要自定义弹出窗口。

【讨论】：

这并不能解决我的问题。问题是试图让点击功能完全触发。我的
属性似乎覆盖了我指定的任何点击功能，我不知道如何解决它。
更改按钮类型而不是提交使用按钮；
保罗，您上面的回答部分正确。我无法简单地“返回确认（'消息'）;”。我必须先存储确认响应，然后再采取行动。但是，解决方案不仅限于此，因此我在下面提供了更全面的回复。

【解决方案2】：

解决了！

首先，我不需要在 BUTTON 上使用“onclick”，而是需要在 FORM 标签上使用“onsubmit”（根据我对开篇文章的评论）。

其次，由于我希望 DELETE 按钮始终触发 Confirm 消息，而 UPDATE 按钮仅在某些情况下触发 Confirm 消息，所以我只是将 Delete 按钮分成了自己的表单（因为表单输入字段不是如果用户正在删除记录，则相关）。

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;
  }
}

我尝试了一百种方法，它永远不会触发我的函数 (onsubmit="validateForm()")，但它会触发一个简单的返回 (onsubmit="return confirm('message')")。最后，我发现它没有触发我的函数的原因是因为我的函数的 IF 语句中有语法问题，这一定是导致整个函数无效。所以我改变了它：

发件人：

if(awayScore == 0 && homeScore == 0 and status = 'FINAL') {

收件人：

if(awayScore == 0 && homeScore == 0 && status == 'FINAL') {

我还发现了一个简单的“return confirm('message');”不工作。我必须存储 Confirm 消息的结果，然后返回 true/false。

【讨论】：