захватить все входные значения из формы

Question

У меня есть несколько входных тегов в форме, и мне нужно подготовить все значения для отправки по запросу Ajax. Ниже приведен пример входных полей:

<form> 
    <input name="foo" value="1"> 
    <input name="foo1" value="1"> 
    <input name="bar[]" value="2"> 
    <input name="bar[]" value="2"> 
    <input name="fooBar[a][]" value="3"> 
    <input name="foobar[b][]" value="3"> 
</form> 

Ожидаемый результат:

{ 
    foo : "1", 
    foo1 : "1", 
    bar : ["2", "2"], 
    fooBar : { a : ["3"], b : ["3"]} 
} 

или:

{ 
    foo : "1", 
    foo1 : "1", 
    "bar[0]" : "2", 
    "bar[1]" : "2", 
    "fooBar[a][0]" : "3", 
    "fooBar[b][0]" : "3" 
    } 

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

Answer 1

Это не идеально, и это своего рода смесь между двумя вашими ожидаемыми выходами, но это просто и, надеюсь, вы можете понять, что происходит.

function serializeForm(frm) { 
    var ret = {}; 
    [].forEach.call(frm.elements, function (element) { 
     if (ret.hasOwnProperty(element.name)) { 
      if (!Array.isArray(ret[element.name])) { 
       ret[element.name] = [ret[element.name]]; 
      } 
      ret[element.name].push(element.value); 
     } else { 
      ret[element.name] = element.value; 
     } 
    }); 
    return ret; 
} 

console.log(serializeForm(document.forms.frm)); 

выходы

bar[]: ["2","2"] 
foo: "1" 
foo1: "1" 
fooBar[a][]: "3" 
foobar[b][]: "3" 

http://jsfiddle.net/rlemon/FFMb7/ вы можете посмотреть демо здесь.

Чтобы разделить детали foobar (предполагая, что кепки были опечатками), вам нужно будет немного поработать и, вероятно, использовать регулярные выражения, чтобы разделить первую часть массива и значения в скобках. Я даже не буду пытаться это сделать для вас, потому что я ненавижу регулярные выражения: P, надеюсь, этот выход будет работать.

Обновление: если вы на самом деле пытаетесь сериализовать форму для отправки http, вам следует использовать более стандартную форму. form serialize javascript (no framework) как описано здесь.

Answer 2

Спасибо за идеи. Я просто понял, что именно я хочу с этим сделать, и я решил эту проблему легко. В принципе мне нужно отправить значения Повсеместно Ajax запроса, так что я просто нуждающиеся QueryString, так вот мое простое решение, которое, кажется, работает именно так, как мне нужно:

var elements = form.elements; 

var data; 

for(var i = -1, j = elements.length; ++i < j;) 
{ 
    if(elements[i].name) 
    { 
    data += "&" + elements[i].name + "=" + encodeURIComponent(elements[i].value); 
    } 
}