时间戳

首页 > 解决方案 > serializeArray 没有选择动态创建的表单

javascript - serializeArray 没有选择动态创建的表单

问题描述

我已经审查了许多关于这个主题的堆栈溢出线程，尤其是这个 jQuery serializeArray 没有选择动态创建的表单元素，但没有一个能够解决问题

我正在通过 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)
     }

问题是它只在控制台日志中显示空数组 []。 在此处输入图像描述

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

标签： javascripthtmlarraysformsserializearray

解决方案

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

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;">' +
            .
            .
            .

推荐阅读