Сериализация формы с помощью динамических клавиш

Question

Я ищу лучший способ сериализации формы с входными парами; один вход для ключа, другой - для значения. Тот, кто использует эту форму, может предпочесть добавить дополнительные пары ввода ключа.

У меня есть this fiddle, чтобы сериализовать форму, но я не уверен, что это лучший/оптимальный/удобочитаемый способ. Есть ли какая-нибудь библиотека или метод, которые мне не хватает, что сделает этот код лучше?

код следующим образом:

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

и CSS

span { 
    display: block; 
} 

Кроме того, я не уверен, если я правильно кодировать это URI ...

Answer 1

Вы можете использовать .serialize:

.serialize() метод создает текстовую строку в стандартном url- закодированный запись. Он может действовать на объект JQuery, который выбрал отдельные элементы формы, такие как < ввода >, <TEXTAREA> и < выберите >

Пример:

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

Но это предполагает, что вы имеете предоставил имя для ваших элементов формы.

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

http://jsfiddle.net/s2tyS/1/ См