Sweetalert2 无法在 Laravel 中调用确认 POST 提交按钮

分类：编程问答

如何解决Sweetalert2 无法在 Laravel 中调用确认 POST 提交按钮

在我的 Laravel-5.8 中，我有这个帖子请求，我想使用 Sweetalert2 确认

< script type = "text/javascript" >

  $(document).ready(function() {

    $("#hrbp_yearend_approve-form").submit(function(e) {

      $("#hrbp_yearend_approve_btn-submit").attr("disabled",true);
      $('#hrbp_yearend_approve_btn-submit').html('Processing...');

      return true;
    });
  }); 
</script> 

<script type = "text/javascript" >
  function submitFunction() {
    var x = document.getElementById("yearendSubmit");

    if (y == 1) {
      Swal('Oops...','You cannot submit this review rating!','error')

    } else {
      Swal({
        title: 'Are you sure?',text: 'This action will submit the employee review rating!',type: 'warning',showCancelButton: true,confirmButtonText: 'Yes,submit it!',cancelButtonText: 'No,dont submit it'
      }).then((result) => {
        if (result.value) {
          Swal(
            'Review rating!','The employee review rating has been recalledsuccessfully done.','success'
          )
          x.style.display = "none";
        } else if (result.dismiss === Swal.dismissReason.cancel) {
          Swal(
            'Cancelled','The employee review rating is safe :)','error'
          )
        }
      })

    }
  } <
  /script>


<form action="{{ route('appraisal.appraisal_year_end_setups.hrbp_year_end_review_approve',['id' => $goalmanager->employee_id]) }}" method="post" class="form-horizontal" enctype="multipart/form-data" id="hrbp_yearend_approve-form">
  {{csrf_field()}}
  <div class="card-body">
    <input type="hidden" value="{{$count_ratings}}">

    <div class="col-sm-12">
      <table id="msfTable" class=" table table-bordered table-striped table-hover datatable">
        <thead>
          <tr>
            <th scope="col" class="text-center" width="30%" colspan="{{$count_ratings}}">rating<span style="color:red;">*</span></th>
          </tr>
        </thead>
        <thead>
          <tr>
            @foreach($ratings as $rating)
            <th scope="col">
              {{$rating->rating_description}} ({{$rating->rating_value}}) 
            </th>
            @endforeach
          </tr>
        </thead>
        <tbody>
          <tr>
            @foreach($ratings as $index => $rating)
            <td align="center">
              <input type="radio" name="appraisal_rating_id" value="{{$rating->id}}" id="{!! $rating->id !!}" @if (!$index) {!! "unchecked" !!} @endif required>
            </td>
            @endforeach
          </tr>
        </tbody>
      </table>
    </div>
    <div id="yearendSubmit" class="float-left">
      <button type="submit" id="hrbp_yearend_approve_btn-submit" onclick="submitFunction()" class="btn btn-primary"> <i class="fas fa-check-circle"></i> Submit</button>
    </div>
  </div>
</form>

当我提交 POST 请求表时，我希望在发布之前得到 sweetalert2 的确认。此外，期望按钮显示处理...直到它被发布到数据库。

数据已经发布到数据库中，但是sweetalert2确认和处理...没有出现。

我该如何解决这个问题？

谢谢

解决方法

您可以使用 onsubmit 这将在点击提交按钮时被调用，因此在 submitFunction() 内您可以编写逻辑以返回 true 或 false 取决于此表单将提交.然后，你有错字，没有 Swal 它的 swal 改变它。另外，我在你的函数中更改了一些代码以添加 attr 以提交按钮并删除它......等等。

演示代码： 

function submitFunction() {
  var flag = false; //declare this
  var x = document.getElementById("yearendSubmit");
  var y = 0
  //your submit..
  $("#hrbp_yearend_approve_btn-submit").attr("disabled",true);
  $('#hrbp_yearend_approve_btn-submit').html('Processing...');

  if (y == 1) {
    swal('Oops...','You cannot submit this review rating!','error')
    flag = false;
  } else {
    //use buttons 
    swal({
      title: 'Are you sure?',text: 'This action will submit the employee review rating!',icon: 'warning',buttons: true,buttons: ["No,dont submit it","Yes,submit it!"],}).then((result) => {
      //check if true
      if (result) {
        swal(
          'Review Rating!','The employee review rating has been recalledsuccessfully done.','success'
        )
        x.style.display = "none";
        flag = true; //set flag to true
      } else if (!result) {
        //not true
        swal(
          'Cancelled','The employee review rating is safe :)','error'
        )
        flag = false; //set flag to false
        $("#hrbp_yearend_approve_btn-submit").attr("disabled",false)
        $('#hrbp_yearend_approve_btn-submit').html('<i class="fas fa-check-circle"></i> Submit')
      }
    })

  }
  return flag;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
<!--put onsubmit here-->
<form action="{{ route('appraisal.appraisal_year_end_setups.hrbp_year_end_review_approve',['id' => $goalmanager->employee_id]) }}" method="post" class="form-horizontal" enctype="multipart/form-data" id="hrbp_yearend_approve-form" onsubmit="return submitFunction()">
  <!--your other codes-->
  <div id="yearendSubmit" class="float-left">
    <button type="submit" id="hrbp_yearend_approve_btn-submit" class="btn btn-primary"> <i class="fas fa-check-circle"></i> Submit</button>
  </div>
</form>

,

您的脚本有两个问题：

  1. 您正在使用大写的 S 调用 Swal() 函数，而您要查找的函数是 swal()。
  2. 变量 y 未定义。

此外，最好在同一个调用中定义两个 JS 代码片段，因为它们需要在同一个事件中被触发。

下面的代码应该可以工作：

$(document).ready(function () {
    $("#hrbp_yearend_approve-form").submit(function (e) {
      $("#hrbp_yearend_approve_btn-submit").attr("disabled",true);
      $("#hrbp_yearend_approve_btn-submit").html("Processing...");
      
      var x = document.getElementById("yearendSubmit");

      y = 1;
      if (y == 1) {
        swal("Oops...","You cannot submit this review rating!","error");
      } else {
        swal({
          title: "Are you sure?",text: "This action will submit the employee review rating!",type: "warning",showCancelButton: true,confirmButtonText: "Yes,submit it!",cancelButtonText: "No,}).then((result) => {
          if (result.value) {
            swal(
              "Review Rating!","The employee review rating has been recalledsuccessfully done.","success"
            );
            x.style.display = "none";
          } else if (result.dismiss === Swal.DismissReason.cancel) {
            swal("Cancelled","The employee review rating is safe :)","error");
          }
        });
      }

      return true;
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<form
  action="{{ route('appraisal.appraisal_year_end_setups.hrbp_year_end_review_approve',['id' => $goalmanager->employee_id]) }}"
  method="post"
  class="form-horizontal"
  enctype="multipart/form-data"
  id="hrbp_yearend_approve-form"
>
  <div class="card-body">
    <input type="hidden" value="{{$count_ratings}}" />

    <div class="col-sm-12">
      <table
        id="msfTable"
        class="table table-bordered table-striped table-hover datatable"
      >
        <thead>
          <tr>
            <th
              scope="col"
              class="text-center"
              width="30%"
              colspan="{{$count_ratings}}"
            >
              Rating<span style="color: red">*</span>
            </th>
          </tr>
        </thead>
        <thead>
          <tr>
            <th scope="col">
              Description1 (value1)
            </th>
            <th scope="col">
              Description2 (value2)
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center">
              <input type="radio" name="appraisal_rating_id"
              value="1" id="1" required>
            </td>
            <td align="center">
              <input type="radio" name="appraisal_rating_id"
              value="2" id="2" required>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="yearendSubmit" class="float-left">
      <button
        type="submit"
        id="hrbp_yearend_approve_btn-submit"
        class="btn btn-primary"
      >
        <i class="fas fa-check-circle"></i> Submit
      </button>
    </div>
  </div>
</form>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot