0

フォームに複数の入力タグがあり、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 でこれを行う方法についてヒントを与えることができます。

4

2 に答える 2

0

これは完璧ではなく、予想される 2 つの出力の混合のようなものですが、シンプルで何が起こっているのかを理解できることを願っています。

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/ここでデモを見ることができます。

foob​​ar のものを分割するには (キャップがタイプミスであると仮定して) もう少し作業を行う必要があり、おそらく正規表現を使用して配列の最初の部分と括弧内の値を分割する必要があります。私は正規表現が嫌いなので、あなたのためにそれを試みるつもりはありません:Pなので、この出力がうまくいくことを願っています.

更新: 実際に http 送信用にフォームをシリアル化しようとしている場合は、より標準的なフォームを使用する必要があります。ここで説明されているように、 JavaScript をシリアル化します (フレームワークなし)。

于 2013-04-16T18:44:02.860 に答える