jquery - sweetalert2 failed to call Confirm POST submit button in Laravel

Question

In my Laravel-5.8, I have this post request which I want to confirm using 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>

When I submitted the POST request form, I expected sweetalert2 confirmation before being posted. Also, expects the button to display processing... until it is posted to the database.

The data got posted to the database, but the sweetalert2 confirmation and the processing... did not appear.

How do I resolve this?

Thanks

Answer 1

There are two problems with your script:

1. You are calling the Swal() function with a capital S, whereas the function you are looking for is swal().
2. the variable y is not defined.

Additionally, it's better to define your two snippets of JS code in the same call, as they need to be fired at the same event.

The code below should work:

$(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>