sweetalert2 在 Laravel 中调用 Confirm POST 提交按钮失败

Question

在我的 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 确认和处理...没有出现。

我该如何解决这个问题？

谢谢

Answer 1

您的脚本有两个问题：

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

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

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

$(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, 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");
          }
        });
      }

      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>

Answer 2

您可以使用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>