Question

我在用户单击按钮时无法使用“确认”弹出窗口。

用例1：：在“更新”按钮上，当表单字段满足某些条件时，需要进行确认。（请参阅 formSubmit（）函数。）当前，当用户单击“更新”按钮时，它会成功执行Form标记中指定的“游戏/更新”操作（Laravel路线）。我只是无法启动该功能。

用例2：：在“删除”按钮上，需要确认。（请参阅 formDelete（）函数。）当前，当用户单击“删除”按钮时，它会成功执行“删除”按钮中指定的“游戏/删除”操作（一条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

已解决！

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

第二，由于我希望DELETE按钮始终触发确认消息，而UPDATE按钮仅在某些情况下触发确认消息，因此我只是将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') {

我还发现一个简单的“返回确认（'消息'）；”不工作。我必须存储Confirm消息的结果，然后返回true / false。

要求确认表格提交

2 个答案: