Question

我有一个表单，当提交单击它时，它将当前上传数据到我的数据库，然后取消隐藏下面的div显示上传文件的部分。这很好用，但是当我在一个页面上有这样的表单时，它会填充很多空间。我正在寻找一个Bootstrap Modal的上传部分。

不，当我将2个不同的部分单独工作时，每个部分都按照我的要求进行。问题是当我希望它们通过一个“提交”按钮工作时。如何打开Boostrap模式并将表单数据发送到数据库？

我的表格

<form name="myform">
    <!-- all my form detail is here -->
    <button type="submit" class="btn btn-circle btn-info" id="conflandreg" name="conflandreg">Click to confirm details <span class="icon-check"></span></button>
</form>

点击提交时使用的jQuery

$(document).ready(function(){
$('#landregform').on('submit',function(e) {
    $.ajax({
        url:'includes/leadgen/lg_lruploads.php',
        data:$(this).serialize(),
        type:'POST',
        success:function(data){
            console.log(data);
            document.getElementById('showhidelr').style.display = 'block';
            document.getElementById('ownership').style.display = 'block';
        },
        error:function(data){
            $(".alert-danger'").show().fadeOut(5000);
        }
    });
    e.preventDefault();
});
});

如果我将此添加到“提交”按钮data-dismiss="modal" data-target="#lrupload" data-toggle="modal"，则会加载Bootstrap模式，但表单不会提交。

如何让表单提交并从同一个Button打开Bootstrap Modal？

Answer 1

您可以通过js而不是通过数据属性创建和显示模态，只需更改成功回调，如下所示：

success:function(data){
    console.log(data);
    $('#lrupload').modal('show');
},

Answer 2

如何而不是倾听并提交＆＃39;你在点击听吗？

然后你可以更容易地控制它。我的猜测是，当你等待提交时，它会在你做任何其他事情之前离开。

所以：

$('#landregform').on('click',function(e) {
openDialog();
submitAction();
e.preventDefault();
});
});

如何将数据上传到db并从提交中打开Bootstrap Modal弹出窗口？

2 个答案: