Question

我已经复习了许多关于该主题的Stack溢出线程，尤其是这个主题 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)
     }

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

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

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

serializeArray没有拾取动态创建的表单

1 个答案: