Question

这与通过模态中的静态表单值提交表单的方法略有不同。使用相同的方法是行不通的，因为AJAX没有从显示的模态中提交表单值。所以，

HTML

<a href="remote_form.html" data-toggle="modal" data-target="#xModal">load form</a>

模态

<div class="modal fade" id="xModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="xModalLabel">loading...</h4>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect">SAVE CHANGES</button>
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">CLOSE</button>
            </div>
        </div>
    </div>
</div>

jquery的

//clear modal
$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

//submit form
$('#xModal').on('shown.bs.modal',function (e) {
    e.preventDefault();
    var form=$(this).find('form').serialize();
    $('#save_btn').on('click',function(){
        $.ajax({
            url:'inc/data.php',
            type:'POST',
            data:form,
            success : function(data){
                console.log(data);
            }
        });
    });
});

data.php

<?
print_r($_POST);
?>

remote_form.html

<div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title" id="xModalLabel">Reg Form</h4>
    </div>
    <div class="modal-body">
     <form>
        <input type="text" name="fname" /><br />
        <input type="text" name="lname" /><br />
        <input type="text" name="email" />
     </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-link waves-effect" id="save_btn">SAVE</button>

    </div>
</div>

谢谢，欢迎任何评论！

Answer 1

委派您的点击事件，将事件移出on('shown.bs.modal')事件

$(document).on('click', '#save_btn',function(){
   var form=$(this).closest('form').serialize();
    $.ajax({
        url:'inc/data.php',
        type:'POST',
        data:form,
        success : function(data){
            console.log(data);
        }
    });
});

Answer 2

您可以将ids设置为输入字段，然后从该ID中获取数据，如下所示。

<input type="text" name="fname" id="fname"/>

并在脚本上这样做。

//submit form
$('#xModal').on('shown.bs.modal',function (e) {
    e.preventDefault();
    $('#save_btn').on('click',function(){
    var fname = $("#fname");
        $.ajax({
            url:'inc/data.php',
            type:'POST',
            data:{
               fname = fname
            },
            success : function(data){
                console.log(data);
            }
       });
    });
});

如何通过ajax提交远程模态表单 - jQuery

2 个答案: