How to load modal as alertafter inserting data to database?

Question

I have problem to pop up a modal after insert data into database. So, in the tambahnotis.php I have a form for user input the data to insert into database. In the head of tambahnotis.php, I have include the script to get the sucsess == 'true' from tambahnotisphp.php

Below code is from tambahnotis.php

<script type="text/javascript">
    <?php
    if ($_GET['sucsess'] == 'true'){
        echo '$(document).ready(function() {
            $( "#modal-small" ).dialog();
        });';
    }
    ?>
</script>

<form class="card" action="tambahnotisphp.php" method="post" enctype="multipart/form-data" runat="server" >
    <div class="card-body">
        <div class="mb-3">
            <div class="form-label required">Nombor Fail</div>
            <input type="text" class="form-control" name="nomborFail" id="nomborFail" required="" onkeyup="checkUsername(this.value);">
            <div id="uname_response" ></div>
        </div>
        <div class="mb-3">
            <div class="form-label required">Ulasan</div>
            <textarea class="form-control" id="ulasan" name="ulasan" rows="4" cols="50" required=""></textarea>
        </div>
        <div class="mb-3">
            <div class="form-label required">Tarikh Notis Siasatan Dikeluarkan</div>
            <input type="date" class="form-control" name="tarikhNotisKeluar" id="tarikhNotis1" required=""/>
        </div>

        <div class="card-footer">
            <div class="row align-items-center">
            <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" name="submit" class="btn btn-primary btnTambahNotis">Tambah Notis</button>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="modal modal-blur fade" id="modal-small" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Success</div>
            <div>Notis Siasatan berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>


<div class="modal modal-blur fade" id="modal-small2" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Error</div>
            <div>Notis Siasatan tidak berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>

Code below is tambahnotisphp.php where php code for inserting input data from form into database. So, in this code I will pass sucsess = 'true' if the query is succes insert data into database.

<?php

    include('connection.php');
    $conn=Connect();
    
    $idPengguna = "DI200017";

    $nomborFail = $conn->real_escape_string($_POST['nomborFail']);
    $ulasan = nl2br($_POST['ulasan']);
    $status = "BELUM SELESAI";
    // Date entered in the format "yyyy/mm/dd"
    $tarikhNotisKeluar = $conn->real_escape_string($_POST['tarikhNotisKeluar']);

    // Add 30 days to the date
    $futureDate30Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +30 days'));
    $futureDate60Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +60 days'));
    
        
    $query = "INSERT INTO notis(nomborFail, ulasan, tarikhNotisKeluar, tarikhNotis1, tarikhNotis2, status, idPengguna) VALUES('" . $nomborFail . "','" . $ulasan . "','" . $tarikhNotisKeluar . "','" . $futureDate30Days . "','" . $futureDate60Days . "','" . $status . "','" . $idPengguna . "')";

    $success = $conn->query($query);
            
    if ($success){
        
    header("Location: tambahnotis.php?sucsess=true");
            
    $conn->close();
    }else{
        die("Data Notis Siasatan tidak dapat ditambah: ".$conn->error);

    }   
    

?>

The problem is it did not pop up the modal.

Answer 1

Replace your code with this one! problem will be solved

<?php if (isset($_GET['success'])) { ?>
<script>
    var myModal = new bootstrap.Modal(document.getElementById('modal-small'), {
  keyboard: false
})
myModal.show()
</script>
<?php } ?>