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

我该如何解决这个问题？

谢谢

标签： jquerylaravelsweetalert2

Answer 1

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

演示代码：

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>