时间戳

首页 > 解决方案 > 在提交表单之前显示确认按钮

jquery - 在提交表单之前显示确认按钮

问题描述

我的网页上有一个非常简单的表格。当按钮被点击时，表单被提交并且一些数据被发送到我的后端。为了处理请求并发送这些数据，我构建了一个函数。

现在，在请求被触发之前，我想显示一个简单的确认面板。

这是我尝试过的，以下是处理表单提交的函数：

$(document).ready(function () {
  $("#settings").submit(function (event) {

      //This should be the confirm button
      $(document).ready(function() {
        swal({
            title: 'Submit your order',
            type: 'info',
            html:"Are you sure?",
            showCloseButton: false,
            showCancelButton: false,
            focusConfirm: false,
            confirmButtonText: 'Confirm',
            cancelButtonText: 'Go back',
        });
      })

      callAJAX(viewsurl,
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={'settings': $('#settings').val()},

      'post',
       function(data){

       }, null, null );
  return false; 
  });
});

因此，数据在线路callAJAX开始时发送。在此之前，有我的面板。点击表单的按钮后，将显示面板，唯一的问题是，请求仍然发送，而不是等待用户点击确认按钮，这意味着我的代码不会停止，直到面板关闭; 相反，如果没有点击确认按钮，则不应发送请求。有没有什么办法解决这一问题？是否有一些示例可以有效地执行此任务？

相反，以下内容将起作用，并将暂停该功能，直到OK按下按钮：

$(document).ready(function () {
  $("#settings").submit(function (event) {

      alert('Are you sure?');

      //Here the request is sent
      callAJAX(viewsurl,
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={'settings': $('#settings').val()},

      'post',
       function(data){

       }, null, null );
  return false; 
  });
});

标签： jquery

解决方案

这可以帮助你

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var r = confirm("Press a button!");
  if (r == true) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

推荐阅读