时间戳

首页 > 解决方案 > 表单提交后将内容加载到模态

javascript - 表单提交后将内容加载到模态

问题描述

我想在提交表单后和显示模式后将内容加载到位于模式主体内的结果 div，但我无法找出问题所在。当我想将内容加载到模态外的结果 div 时，它可以工作，但是当我在模态内使用结果 div 时，它不会。到目前为止，这是我的代码：

html:

<div class="col-lg-12"> 
        <div class="row">            
                    <div id="form-content">
            <form method="post" id="reg-form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                <div id="monetarylayout" class="form-group">
                        <input class="form-control number" type="text" value="0" name="subjectvalue" id="txt_subjectvalue">
                </div>

                <div class="form-group">
                    <button class="btn btn-primary">submit</button>

                </div>
                        <input class="form-control number" type="text" value="0" name="coinquantity" id="txt_coinquantity" style="display:none"> <!--just to make the form post work-->


        </form>
                </div>
                    <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Modal Header</h4>
                                </div>
                                <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                    <div id="result"></div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

jQuery：

  <script type="text/javascript">
    $(document).ready(function() {  

        // submit form using $.ajax() method

        $('#reg-form').submit(function(e){

            e.preventDefault(); // Prevent Default Submission

            $.ajax({
                url: 'testcontroller.php',
                type: 'POST',
                data: $(this).serialize() // it will serialize the form data
            })
            .done(function(data){
                        $('#myModal').modal(), function() {
                        // do something when the modal is shown    
                            $('#result').fadeIn('slow').html(data);
                        }


            })
            .fail(function(){
                alert('Ajax Submit Failed ...');    
            });
        });

    });
    </script>

标签： javascriptjqueryajaxforms

解决方案

我想通了。我应该将这些属性添加到我的表单按钮中：

                            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">submit</button>

并编辑此功能如下：

.done(function (data) {

                        $('#result').fadeIn('slow').html(data);

                    })

推荐阅读