序列化带有相应标签的表单答案

【问题标题】：Serializing a form with corresponding labels序列化带有相应标签的表单
【发布时间】：2018-10-10 21:30:54
【问题描述】：

我正在使用 jQuery 序列化表单，并将其值发布到 url，该 url 将它们作为名称/值对存储在数据库中。但是，每个表单字段的名称和 ID 是动态生成的（例如 f4sgg-342），因此不描述特定字段。我无法控制生成这些字段的系统。

但是有相应的标签，其中包含特定表单字段的描述 - 它们还包含 for="f4sgg-342" 属性，允许我将标签链接到正确的字段。

我使用了常规的 form.serialize() 函数：

<script type="text/javascript">
$(document).ready(function() {
    var form = $("#some-form");

    $("#some-form").submit(function(e) {
        $.ajax({
            type: "POST",
            url: 'https://example.com/post.php',
            data: form.serialize(),
            success: function(response) {
                console.log(response);
                $("#result").html(response);
            },
            error: function() {
                alert('Error Submitting');
            }
        })
    })
})

但是当我将内容传递给 url 时，我很不知道如何用标签替换表单字段名称。考虑使用 jQueryUI 的 .labels() - 但又一次 - 似乎无法“连接点”

有什么建议吗？谢谢！

【问题讨论】：

您能发布其中一个输入的示例 HTML 吗？
序列化的键/值对不依赖于id，而是属性name和字段value。要将名称属性替换为标签，您必须克隆整个表单元素，以克隆形式替换名称并序列化此修改后的表单。

标签： javascript jquery forms

【解决方案1】：

这个怎么样？假设您在表单底部有一个按钮 （带有 id 提交），该按钮附加到点击事件：

$("#submit").click(function(){

    var originalSerialized = $("#some-form").serialize();
    console.log(originalSerialized);

    var splitedString = originalSerialized.split("&");
    console.log(splitedString);

    var newString = "";

    $.each(splitedString, function(i, element){

        var strangeName = element.substr(0, element.indexOf('='));

        if(newString == "")
            newString = $("label[for='"+strangeName+"']").html() + element.substr(element.indexOf('='));
        else
            newString += "&" + $("label[for='"+strangeName+"']").html() + element.substr(element.indexOf('='));

    })

    console.log(newString);

    //Here, you do the AJAX and the data is the newString variable

})

【讨论】：