使用动态键序列化表单

Question

I am looking for a better way to serialize a form with input pairs; one input is for the key, another is for the value. Whoever is using this form could opt to add more key-value input pairs.

I currently have this fiddle to serialize the form, but I am not convinced this is the best/optimal/readable way. Are there any library or method I'm missing that would make this code better?

Code as follows:

HTML:

<div>
    <form>
        <span>
            <input type="text" class="key" id="key1"/><input type="text" class="value" id="value1"/>
        </span>
    </form>
</div>
<a href="#" id="add">Add</a>
<a href="#" id="serialize">Serialize</a>
<div id="serialized-string"></div>

JavaScript :

$(document).ready(function(){
    var numberOfPairs = $('.key').length;
    $('#add').on('click', function () {
        numberOfPairs += 1;
        $('div > form').append('<span><input type="text" class="key" id="key'+numberOfPairs+'"/><input type="text" class="value" id="value'+numberOfPairs+'"/></span>'); 
    });
    $('#serialize').on('click', function () {
        var serialized = "";
        for(var x = 1; x <= numberOfPairs; x +=1) {
            var keyValuePair = $('#key'+x).val() + "=" + $('#value'+x).val();
            if(serialized.length > 0) {
                serialized += "&" + keyValuePair;               
            } else {
                serialized += keyValuePair;
            }
        }
        alert(serialized);
    });  
});

and CSS

span {
    display: block;
}

Also, I am not sure if I should properly encode this to URI...

Answer 1

You can use .serialize :

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>

Example:

$('#serialize').on('click', function () {
    alert($('form').serialize());
});

But this assumes you've provided a name for your form elements.

<input type="text" class="key" name="key1" id="key1"/><input type="text" class="value" id="value1" name="key2" />**strong text**

See http://jsfiddle.net/s2tyS/1/