按名称引用动态插入的表单返回 null 或 undefined

问题描述 投票:0回答:0

我正在使用 JQuery $.ajax() 后调用来替换使用 .html() 的 Bootstrap 5 模态的最初空主体。 editquantity.php 执行一些数据库查询并输出一些 html 表格,但表格本身是一种形式,因此可以修改现有值,然后通过 submiteditform() 中定义的另一个 $.ajax() post 调用提交。我想将 submiteditform() 调用绑定到模态页脚中定义的提交按钮(功能和按钮都在原始文件中定义),但是当尝试通过表单名称创建 FormData 时它返回 null 或 undefined,因为整个表单由第一个 $.ajax() post 调用动态添加。

<div id="editQuantityModal" class="modal" data-backdrop="false">
        <div class="modal-dialog modal-fullscreen-xxl-down" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel"></h5>
                        </div>
                        <div class="modal-body" id="editquantity">
                        </div>

                        <div class="modal-footer justify-content-between">
                                        <button id="editsubmitbutton" type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-hidden="true">Submit Changes</button>
                                </div>
                        </div>
                </div>
        </div>
</div>
$.ajax({
    url: 'editquantity.php',
    data: formData,
    method: 'POST',
    success: function (result) {
        $('#editquantity').html(result)
        $('#editsubmitbutton').attr('onClick', 'submiteditform("' + divhash + '");');
    },
    processData: false,
    contentType: false
});
function submiteditform(divhash) {
const myForm = document.querySelector('#editform');
alert(myForm);    
const formData = new FormData(myForm);

警报返回空值。如果我改用 JQuery,它仍然会返回 undefined。

function submiteditform(divhash) {
const myForm = $('#editform');
alert(myForm[0]);   
const formData = new FormData(myForm);

表格名称其实是正确的

    <form name="editform" id="editform" method="" action="">

我在这里和其他地方阅读了大量帖子,并且了解到无法找到 id,因为 DOM 尚未正确更新/最终确定。但是对于我的一生,我无法用正确的方法来解决它。

我不认为我可以将代码放入 document.ready() 中,因为原始页面上有大量链接可以用不同的数据调出这个模式。它旨在在原始页面的生命周期内被多次调用。我需要能够访问表单的每个新迭代。

我考虑过在原始模态主体定义中放置一个虚拟表单,以便表单和所有命名输入都在那里,但表单可以根据查询结果进行更改。而且我认为在测试时它说它仍然无法通过名称找到表格,即使我在那里放了一个具有正确名称的空表格。

我已经看到使用 .on('submit') 来访问动态添加的表单的答案,但我不想像标准的邮寄电话那样提交表单。我想使用 Ajax,所以我需要手动填充 FormData 以发送到 ajax 调用。

我想要模态页脚中的提交按钮,以便它保持静止,为什么正文可能会滚动许多表格。但我什至尝试将提交按钮和功能与表单本身一起放在 editquantity.php 文件中,但仍然没有用。我忘记了相同或不同的错误。

我只在 Safari 上测试过,所以我不知道我的困难是否是特定于浏览器的。

抱歉,如果这是重复的,但我已经搜索了几天,据我所知,这是独一无二的,我找不到答案。要么,要么我犯了一个愚蠢的错误,如果没有人在我身后看着我,我是找不到它的,老实说,这更有可能。

jquery ajax forms dom bootstrap-5
© www.soinside.com 2019 - 2024. All rights reserved.