php - 带有 Bootstrap 模态表单的 AJAX 页面 - 提交不起作用

Question

我搜索了很多关于这个问题的信息，但还没有找到解决方案。

首先是关于我的设置的简短描述，以使我的问题更清楚。

• 带有菜单的Settings.php页面，您可以在其中选择不同的设置类别
• 通过单击一个菜单点，相应的菜单点将通过 ajax 加载并显示。

$('#content').load("http://"+ document.domain + "/domainhere/settings/menupoint1.php");

• 在menupont1.php页面上我得到了一个包含mysql数据的列表。
• 我为每一行实现了一个“编辑”按钮 - 单击编辑按钮时，会出现一个 boostrap 模式，其中包含一个表单以及已填写并准备编辑的相应数据。
• 当我现在点击“保存更改”时，POST 请求始终为空。

为了实现表单提交，我已经尝试了几个代码:

例如:

   $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            }
        }
    });

或

$(function(){
    $('#editform').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: url, //this is the submit URL
            type: 'GET', //or POST
            data: $('#editform').serialize(),
            success: function(data){
                 alert('successfully submitted')
            }
        });
    });
});

目前:

while($xy= $xysql->fetch_assoc()) {
<div class="modal fade" id="edit-<?php echo $xy["id"] ?>" [..]>
<button id="submit>" class="btn btn-default">Save</button>
</div>

<script>
                     $(function() {
                        $('button#submit').click(function(){
                                $.ajax({
                                type: 'POST',
                            url: './test2.php',
                            data: $('form#modal-form').serialize(),
                                success: function(msg){
                                        $('#test').html(msg)
                                    $('#form-content').modal('hide');   
                                    },
                            error: function(){
                                alert('failure');
                                }
                                });
                        });
                    });
                    </script>

也许这里有人可以帮我解决这个问题？ 非常感谢:)

Answer 1

我已经设置了一个最小的示例来说明这是如何工作的:

两个模式的示例 html，在您的情况下在循环中生成。 我现在已经在没有唯一 ID 的情况下完成了它，但通过类进行选择。

<div class="modal">
          <!-- // this classname is new and important -->
   <form class="editform">
     <input name="test" value="value1">
     <button class="btn btn-default">Save</button>   
   </form>
</div>

<div class="modal">
   <form class="editform">
     <input name="test" value="value2">
     <button class="btn btn-default">Save</button>   
   </form>
</div>

你的 JavaScript 应该是这样的:

$(function() {
   var formsAll = $('.editform');
                          // changed this to onSubmit, because it's easier to implement the preventDefault!
   formsAll.on('submit',function(e){
       e.preventDefault();
       var formData = $(this).serialize();
       console.log(formData);
       // add your ajax call here.
       // note, that we already have the formData, it would be "data: formData," in ajax.

   });
});

请注意，我没有您真正的 html 结构，因此详细信息可能会有所不同。但你明白了。

也可以在这里找到: https://jsfiddle.net/a0qhgmsb/16/