使用動態鍵序列化表單

我正在尋找更好的方式來序列化具有輸入對的表單;一個輸入是關鍵，另一個是關鍵。使用此表單的人可以選擇添加更多鍵值輸入對。使用動態鍵序列化表單

我目前有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 ...

來源

2013-11-21 Kevin D.

您可以使用.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/

來源

2013-11-21 15:38:41 sroes

使用動態鍵序列化表單

回答

相關問題