serializeArray is not picking up dynamically created form

Question

I have reviewed many Stack overflow threads on this topic most especially this one jQuery serializeArray not picking up dynamically created form elements, but none was able to solve the problem

I am searching through firebase database for a match. if there is a match form A is presented but if there is no match, form B is presented.

 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;

        })
});

I want to get the input value from the form when submit button is clicked, hence this function

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

the problem is that it only shows empty array [] in console log.

The input values are not retrieved and displayed. How do I capture the input value onclick of the submit button

Gerald LeRoy · Answer 1 · 2018-07-07T19:18:00.133

I'm wondering if one of these things might be causing the problem? I could be wrong but might be worth checking:

1. Isn't the correct syntax this? document.getElementById('container').innerHTML += resultcard;

.....instead of this? container.innerHTML += resultcard;

2. When including html in a JavaScript file, should the quotes around your html be implemented like this? (Also note the use of the 'standard quote' marks as opposed to using `back quote` marks.)

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

serializeArray is not picking up dynamically created form

1 Answers1