要求确认提交表格

Question

我在用户单击按钮时使用确认弹出窗口时遇到问题。

用例 #1： 在“更新”按钮上，当表单字段满足特定条件时需要确认。（请参阅 formSubmit() 函数。）目前，当用户单击“更新”按钮时，它会成功执行 "games/update" 操作（一个 Laravel 路由），如表单标签。我只是无法启动该功能。

用例 #2： 在删除按钮上，需要确认。（请参阅 formDelete() 函数。）目前，当用户单击删除按钮时，它会成功执行 "games/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>

Answer 1

点击确认对话框中的按钮后得到结果。

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

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

Answer 2

已解决！

首先，我没有在 BUTTON 上使用 "onclick"，而是需要在 FORM 标签上使用 "onsubmit"（根据我对开头 post 的评论）。

其次，因为我希望删除按钮始终触发确认消息，而更新按钮仅在某些情况下触发确认消息，我只是将删除按钮分离到它自己的表单中（因为表单输入字段如果用户正在删除记录则不相关）。

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()") 但它会触发一个简单的 return (onsubmit="return confirm('message')")。最后，我发现它没有触发我的函数的原因是我的函数的 IF 语句中存在语法问题，这一定导致整个函数无效。所以我改变了它：

发件人：

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

收件人：

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

我还发现一个简单的 "return confirm('message');" 不起作用。我不得不存储确认消息的结果，然后 return true/false.

要求确认提交表格

Require Confirmation on Form Submission

laravel

forms

submit

confirm