serializeArray 没有选择动态创建的表单答案

【问题标题】：serializeArray is not picking up dynamically created formserializeArray 没有选择动态创建的表单
【发布时间】：2018-12-15 20:25:07
【问题描述】：

我已经查看了很多关于这个主题的堆栈溢出线程，尤其是这个 jQuery serializeArray not picking up dynamically created form elements，但是没有人能解决问题

我正在通过 firebase 数据库搜索匹配项。如果匹配，则显示表单 A，但如果没有匹配，则显示表单 B。

 return CatalogueDB.ref('/FSC/Misc/' + splitinput[index]).once('value').then(function(snapshot) {

            console.log(snapshot.val())
            var key = snapshot.val().NSN
            var Name = snapshot.val().Nomenclature


            var resultcard = `
            <form id="myform">
            <tr class="tr-shadow">


                                             <td    style="width: 90px;">
                                            <div>${key}
                                            </div>
                                            <div>
                                                <br>
                                                 <button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#mediumModal">
                                                    Add Photos
                                                    </button>
                                            </div>

                                            </td><td>
                                                <span class="block ">
                                                    ${Name}
                                       </span>
                                            </td>
                                            <td class="desc">

                                                <input class="au-input au-input--sm" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />


                                            </td>

                                            <td>
                                                <span class="status--process">
                                                <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
                                                </span>

                                            </td>

                                                <td>

                                                    <button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>

                                            </td>
                                        </tr>
                                </form>

                                        <tr class="spacer"></tr>


          `
            container.innerHTML += resultcard;



        })

        .catch(function(error) {
            container.innerHTML += "";

            var errorcard = `
                <form id="myform">

            <tr class="tr-shadow">

                                            <td    style="width: 90px;">
                                            <div>${splitinput[index]}
                                            </div>

                                            </td>
                                            <td>

                                                    <span class="status--process">
                                                <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
                                                </span>

                                            </td>

                                            <td>
                                                <span class="status--process">
                                                <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;" />
                                                </span>

                                            </td>
                                            <td class="desc">
                                                    <input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas &amp; reports..." style="width: 90px;"  />
                                            </td>


                                                <td>

                                                    <button type="button" class="btn btn-primary btn-md" onclick="postitem(this)">Submit</button>

                                            </td>
                                        </tr>
                                    </form>
          `
            container.innerHTML += errorcard;

        })
});

我想在点击提交按钮时从表单中获取输入值，因此这个函数

    function postitem() {
      var data = $('#myform').serializeArray();
      console.log(data)
     }

问题是它只在控制台日志中显示空数组 []。

不检索和显示输入值。如何捕获提交按钮的点击输入值

【问题讨论】：

标签： javascript html arrays forms serializearray

【解决方案1】：

我想知道这些事情中的一个是否会导致问题？我可能是错的，但可能值得检查：

1。这不是正确的语法吗？ document.getElementById('container').innerHTML += resultcard;

.....而不是这个？ container.innerHTML += resultcard;

2。在 JavaScript 文件中包含 html 时，是否应该像这样实现 html 周围的引号？（另请注意使用“标准引号”标记而不是使用“反引号”标记。）

var resultcard = 
    '<form id="myform">' +
        '<tr class="tr-shadow">' +
            '<td    style="width: 90px;">' +
            .
            .
            .

【讨论】：