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

【问题标题】：How can I upload data to db and open Bootstrap Modal popup from a submit?如何将数据上传到 db 并从提交中打开 Bootstrap Modal 弹出窗口？
【发布时间】：2014-08-07 10:50:45
【问题描述】：

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

当我有 2 个不同的部分单独工作时，每个部分都按照我的意愿工作。问题是当我希望他们通过一个提交按钮工作时。如何让 Boostrap Modal 打开并将表单数据发送到数据库？

我的表格

<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" 然后引导模式将加载，但表单不提交。

如何让表单提交并从同一个按钮打开引导模式？

【问题讨论】：

标签： php jquery twitter-bootstrap

【解决方案1】：

您可以通过 js 而不是通过数据属性创建和显示模式，只需像这样更改您的成功回调：

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

【讨论】：

【解决方案2】：

与其在“提交”上收听，不如在点击时收听怎么样？

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

所以：

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

【讨论】：