我们正在为应用程序做一个概念验证，其中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标准，并设置每个input和submit元素的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相关的所有可能元素，那将是非常有帮助的。
提前致谢。
答案 0 :(得分：1)
line var inputValues = formElement.serializeArray（）;总是 空。
生成的HTML就是问题所在。如果仔细检查，可以看到表格标签是空的，所有元素都掉了。
取自您的HTML
<form method="POST" id="CustomerSAM"></form>
...
<form method="POST" id="AddressSAM"></form>
但是你说你在属于一个表单的所有元素上维护form_id，这很好。
然后来到你的剧本，
var formElement = $('#'+formElementId);
这为您提供了表单标记（Remember that the form tag is empty）。然后你试着这样做。
var inputValues = formElement.serializeArray();
显然是空的。
解决方案：您可以收集所有输入元素并将其附加到新表单，然后将其序列化。如下所示
var newForm = $('<form></form>')
$.each($('[form_id="CustomerSAM"]'),function(i,v){
$(newForm).append($(this));
});
var serializedData = $(newForm ).serializeArray();
如果有帮助，请告诉我。