填寫注冊表后，Bootstrap 模態在同一模態上顯示“注冊成功”文本

Question

我嘗試使用 Bootstrap Modal 制作注冊表單，並且在成功注冊后，我需要以相同的模式顯示成功消息。 我該怎么做？

我嘗試按照本教程 - 鏈接，但它不會將數據發布到數據庫。

我刪除了表單中的一些輸入代碼，因為它太長了。

插入表格

<div class="modal fade" id="daftarModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Daftar</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
            <form method="post" action="#" id="daftarForm">

                <div class="form-group row">
                    <label for="forEmail" class="col-sm-2">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="forEmail" name="email" >
                    </div>  
                </div>

                <div class="form-group row">
                    <label for="forNama" class="col-sm-2">Nama</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="forNama" name="nama" >
                    </div>
                </div>

                <div class="form-group row">
                    <label for="" class="col-sm-2">Jenis Kelamin</label>
                    <div class="col-sm-10">
                        <div class="radioBtn ">
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="j_kel" id="forLaki-Laki" value="Laki-Laki">
                                <label for="forLaki-Laki" class="form-check-label">
                                    Laki-Laki
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="j_kel" id="forPerempuan" value="Perempuan">
                                <label for="forPerempuan" class="form-check-label">
                                    Perempuan
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <label for="" class="col-sm-2">Paket</label>
                    <div class="col-sm-10">
                        <div class="checkBtn ">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="paket[]" id="forA" value="A">
                                <label for="forA" class="form-check-label">
                                    Paket A
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="paket[]" id="forB" value="B">
                                <label for="forB" class="form-check-label">
                                    Paket B
                                </label>
                            </div><div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="paket[]" id="forC" value="C">
                                <label for="forC" class="form-check-label">
                                    Paket C
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="paket[]" id="forD" value="D">
                                <label for="forD" class="form-check-label">
                                    Paket Daaa
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-10">
                        <input type="submit" name="submit" class="btn btn-success" value="Daftar">
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

Javascript

$(document).ready(function(){

    $('#daftarForm').on('submit', function() {
        event.preventDefault();
        $.ajax({
            url:"daftarForm.php",
            method:"POST",
            data:$('#daftarForm').serialize(),
            success:function(data)
            {
                $('#daftarForm')[0].reset();
                $('#daftarModal').modal('hide');

            }
        })
    });
});

PHP

if(!empty($_POST)) {
        $output = '';
        $email = $_POST["email"];
        $nama = $_POST["nama"];
        $j_kel = $_POST["j_kel"];
        $alamat = $_POST["alamat"];
        $telepon = $_POST["telepon"];
        $asalSekolah = $_POST["asalSekolah"];
        $paketArray = implode(',',$_POST['paket']);

        $sql = $koneksi->query("INSERT INTO `peserta` (`id`, `email`, `nama`, `j_kel`, `alamat`, `no_hp`, `asal_sekolah`, `paket`) VALUES (NULL, '$email', '$nama', '$j_kel', '$alamat', '$telepon', '$asalSekolah', '$paketArray');");

        if($sql) {
            $output .= '<label class="text-success">Pendaftaran Berhasil</label>';
        } else {
            $output .= '<label class="text-success">Pendaftaran Gagal</label>';
        }
    }

Answer 1

這是因為您使用此$('#daftarModal').modal('hide');在success隱藏了模態$('#daftarModal').modal('hide');

像這樣在模態中創建一個橫幅並最初將其隱藏。 成功調用show方法

 $(document).ready(function() { // rest of the code success: function(data) { $('#daftarForm')[0].reset(); // show banner here $('#banner').show(); } });

 <div class="modal fade" id="daftarModal"> <div class='hiddenBanner' id="banner"> Success</div> // rest of the code </div>