javascript - 使用 jQuery 在表单外部序列化动态生成的 HTML 输入元素

Question

我们正在对一个应用程序进行概念验证，其中 HTML 元素是根据用户配置的字段生成的。

示例配置如下；

/// Customer SAM
$response = array(
    array (
        NAME => CUSTOMER,
        TYPE => SAM,
        ENABLEDBUTTONS => SEARCHANDADD,
        TABLENAME => "OCRD",
        FIELDS => array (
            array(
                NAME => "lblCustNr",
                TYPE => LABEL,
                WIDTH => "100px",
                VALUE => "Customer Nr.:"
            ),
            array(
                NAME => "customernr",
                TYPE => TEXT,
                WIDTH => "100px",
                COLUMNNAME => "cardcode",
                VALUE => ""
            ),
            array(
                NAME => "lblCustName",
                TYPE => LABEL,
                WIDTH => "100px",
                VALUE => "Customer Name:"
            ),
            array(
                NAME => "customername",
                TYPE => TEXTAREA,
                COLUMNNAME => "cardname",
                ROWS => "5",
                COLUMNS => "50",
                VALUE => ""
            ),
            array (
                NAME => ADDRESS,
                TYPE => SAM,
                ENABLEDBUTTONS => SEARCH,
                TABLENAME => "CRD1",
                FIELDS => array(
                    array(
                        NAME => "lblStreet",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "Street:"
                    ),
                    array(
                        NAME => "street",
                        TYPE => TEXT,
                        WIDTH => "100px",
                        COLUMNNAME => "Street",
                        VALUE => ""
                    ),
                    array(
                        NAME => "lblStreetNo",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "Street No:"
                    ),
                    array(
                        NAME => "streetNo",
                        TYPE => TEXT,
                        WIDTH => "30px",
                        COLUMNNAME => "StreetNo",
                        VALUE => ""
                    ),
                    array(
                        NAME => "lblCity",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "City:"
                    ),
                    array(
                        NAME => "city",
                        TYPE => TEXT,
                        WIDTH => "100px",
                        COLUMNNAME => "City",
                        VALUE => ""
                    ),
                    array(
                        NAME => "lblZipcode",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "ZipCode:"
                    ),
                    array(
                        NAME => "zipcode",
                        TYPE => TEXT,
                        WIDTH => "50px",
                        COLUMNNAME => "ZipCode",
                        VALUE => ""
                    ),
                    array(
                        NAME => "lblState",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "State:"
                    ),
                    array(
                        NAME => "state",
                        TYPE => TEXT,
                        WIDTH => "100px",
                        COLUMNNAME => "State",
                        VALUE => ""
                    ),
                    array(
                        NAME => "lblCountry",
                        TYPE => LABEL,
                        WIDTH => "100px",
                        VALUE => "Country:"
                    ),
                    array(
                        NAME => "country",
                        TYPE => TEXT,
                        WIDTH => "100px",
                        COLUMNNAME => "Country",
                        VALUE => ""
                    )
                )
            )
        ),
        SEARCHQUERY => "
            SELECT cardcode, cardname
            FROM [{DATABASENAME}].dbo.OCRD
            [{WHERECLAUSE}]
        "
    )
);

通过使用递归方法，生成HTML元素如下；

<form method="POST" id="CustomerSAM"></form>
<p>Customer Nr.:</p>
<input name="customernr" id="customernr" form_id="CustomerSAM" type="text" style="width:100px" value=""
/>
<p>Customer Name:</p>
<textarea name="customername" form_id="CustomerSAM" rows="5" cols="50"></textarea>
<form method="POST" id="AddressSAM"></form>
<p>Street:</p>
<input name="street" id="street" form_id="AddressSAM" type="text" style="width:100px" value="" />
<p>Street No:</p>
<input name="streetNo" id="streetNo" form_id="AddressSAM" type="text" style="width:30px" value="" />
<p>City:</p>
<input name="city" id="city" form_id="AddressSAM" type="text" style="width:100px" value="" />
<p>ZipCode:</p>
<input name="zipcode" id="zipcode" form_id="AddressSAM" type="text" style="width:50px" value="" />
<p>State:</p>
<input name="state" id="state" form_id="AddressSAM" type="text" style="width:100px" value="" />
<p>Country:</p>
<input name="country" id="country" form_id="AddressSAM" type="text" style="width:100px" value="" />
<br />
<br />
<p>
    <input name="btnSearch" form_id="AddressSAM" class="button" type="submit" value="Search" tag="AddressSAM" onClick="return searchInSAM($(this));"
    /> |
    <input type="button" form_id="AddressSAM" class="button" value="Clear" onClick="return clearForm($(this));" />
</p>
<br />
<br />
<p>
    <input name="btnSearch" form_id="CustomerSAM" class="button" type="submit" value="Search" tag="CustomerSAM" onClick="return searchInSAM($(this));"
    /> |
    <input name="btnAdd" form_id="CustomerSAM" class="button" type="submit" value="Add" tag="CustomerSAM" /> |
    <input type="button" form_id="CustomerSAM" class="button" value="Clear" onClick="return clearForm($(this));" />
</p>

采用这种方法是因为子模块的动态表单生成导致不适当的表单生成(没有表单标签的嵌套表单)。使用 HTML5 标准并设置每个输入和提交元素的 form_id 属性。我们有一个 JavaScript 函数，它从这些元素中获取输入，并根据提供的搜索键搜索数据。方法如下；

// search the values depending on the provided input.
            // find the form element from the accessing element.
            function searchInSAM(elem)
            {
                var tagAttr = $(elem).attr('tag');

                // will only hold the id of the form. So will have to preceed with # to access the element.
                var formElementId = $(elem).attr('form_id');
                var formElement = $('#'+formElementId);

                var divElement = formElement;
                while(true)
                {
                    divElement = getParent(divElement);
                    if(divElement.is('div'))
                    {
                        break;
                    }
                }

                var inputValues = formElement.serializeArray();
                var serverAddr = "<?php echo CLIENTHANDLER; ?>";
                var requestParams = {
                    "<?php echo METHODNAME; ?>": "<?php echo SEARCH_METHOD; ?>",
                    "<?php echo SAMNAME; ?>": tagAttr,
                    "<?php echo INPUTVALUES; ?>": JSON.stringify(inputValues),
                    "<?php echo DATABASESERVER; ?>": "SWEPROEBS4",
                    "<?php echo DATABASENAME; ?>": "SBOswedex",
                    "<?php echo USERID; ?>": 1
                };
                console.log(inputValues);
                // transfer the request to the server
                request = ajaxRequest(serverAddr, 
                    "<?php echo POSTMETHOD; ?>", 
                    "<?php echo MULTIPARTFORMTYPE; ?>", 
                    "<?php echo JSONTYPE; ?>", 
                    requestParams);

                // Callback handler that will be called on success
                request.done(function (response, textStatus, jqXHR){
                    //console.log(response);
                    $(divElement).html(response);
                });

                // Callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                    // Log the error to the element that is expecting the response
                    $(divElement).html(
                        "The following error occurred: "+
                        textStatus + "<br />" + errorThrown
                    );
                });

                return false;
            }

搜索始终为空，因为 inputValues 数组始终为空。var inputValues = formElement.serializeArray(); 行始终为空。我读到，serialize() 和serializeArray() 仅序列化所提供元素内的元素。

您能否给我一些提示或解决方案，以使用提供的 form_id 序列化所有元素？我将有一个 div 元素，其中包含提供的 HTML 输出，并且该 div 可以包含任何类型的元素；输入、选择选项、文本区域、单选按钮、复选框等。

如果您能为我提供一个通用的建议/解决方案来满足与 form_id 相关的所有可能的元素，那将会有很大的帮助。

提前致谢。

Answer 1

The line var inputValues = formElement.serializeArray(); is always empty.

问题出在您生成的 HTML 上。如果仔细检查，您会发现表单标签是空的，并且所有元素都从其中掉出来。

取自 HTML

<form method="POST" id="CustomerSAM"></form>

...

<form method="POST" id="AddressSAM"></form>

但是你说你维护属于一个表单的所有元素的 form_id，这很好。

然后进入你的脚本，

var formElement = $('#'+formElementId);

这将为您提供表单标签(请记住表单标签为空)。然后你尝试这样做。

var inputValues = formElement.serializeArray();

这显然是空的。

解决方案:您可以收集所有输入元素并将其附加到新表单中，然后将其序列化。像下面这样

 var newForm = $('<form></form>')
 $.each($('[form_id="CustomerSAM"]'),function(i,v){
      $(newForm).append($(this));
 });
 var serializedData = $(newForm ).serializeArray();

请告诉我这是否有帮助。