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

Question

I am using jQuery to serialise a form, and post it's values to a url which stores them as name/value pairs in a DB. However, the names and IDs of each form field are dynamically generated (eg f4sgg-342 ), and are hence not describing the specific field. I have no control of the system generating these fields.

There are however corresponding labels, which contain a description of the specific form field - they also contain a for=" f4sgg-342 " attribute, allowing me to link the label to the right field.

I have used the regular form.serialize() function:

<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');
            }
        })
    })
})

But I am quite clueless how to replace the form field names with the labels, when I post pass the content to the url. Considering using .labels() of jQueryUI - but again - can't seem to be able to "connect the dots"

Any suggestions? Thank you!

Answer 1

How about this?. Lets supose that you have a button in the bottom of the form (with id submit) that is attached to a click event:

$("#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

})