Question

我尝试使用Bootstrap Modal制作注册表单，成功注册后，我需要以相同的模式显示成功消息。我该怎么办？

我尝试遵循本教程-link，但它不会将数据发布到数据库中。

我删除了表单中的某些输入代码，因为它太长了。

插入表格

NavigationLink

JavaScript

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

PHP

$(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');

            }
        })
    });
});

Answer 1

这是因为您使用此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>

引导程序模版，在填写注册表格后以相同的模版显示“注册成功”文本

1 个答案: