formで送信する情報をネストしたjsonで送りたい

Question

###前提・実現したいこと
ユーザがフォームで入力したデータを、以下のようにフォーム名とインプット名でネストしたJSONにしてサーバに送信したい。

{
  "フォーム名1":{
    "インプット名1": "入力したデータ1",
    "インプット名1": "入力したデータ2"
  },
  "フォーム名2":{
    "インプット名1": "入力したデータ1",
    "インプット名1": "入力したデータ2"
  }
}

フォームは複数あり、それぞれでまとめたいと思っています。

###該当のソースコード
AdminLTE(Bootstrapベースの管理コンソール)を使用しているため、それに関連するタグも付いています。また、二つ目のフォームも省略しています。

<div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">タイトル</h3>
  </div>
  <form role="form" method="post" name="フォーム名1">
    <div class="box-body">
      <div class="form-group">
        <label class="control-label">インプット1のタイトル</label>
        <input type="text" name="インプット名1" class="form-control"/>
      </div>
      <div class="form-group">
        <label class="control-label">インプット2のタイトル</label>
        <input type="text" name="インプット名2" class="form-control"/>
      </div>
    </div>
    <div class="box-footer">
      <button type="submit" class="btn btn-primary">送信</button>
    </div>
  </form>
</div>
ここまでがフォーム数だけ繰り返し

$('form').submit(function(event) {
  // HTMLでの送信をキャンセル
  event.preventDefault();
  // 操作対象のフォーム要素を取得
  var $form = $(this);
  // フォームのデータをDisableにする前に取得
  var tmpData = $form.serializeArray();
  // フォーム無効化
  $form.disable();

  // 送信
  $.ajax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: tmpData,
    timeout: 5000,

  }).done(function(result, textStatus, xhr){
    alert('OK');
  }).fail(function(xhr, textStatus, error){
    alert('NG...');
  }).always(function(xhr, textStatus){
    $form.enable();
  });
});

###補足情報
フォームが複数あり、出来れば、共通のsubmitを使用したいと考えていますが、Web開発は初めてですので、この考え方自体がおかしかったら教えてください。

よろしくお願いいたします。

##追記 解決方法
以下コードで実現は出来ましたが、最適解ではないかもしれません。(後述)

$('form').submit(function(event) {
  // HTMLでの送信をキャンセル
  event.preventDefault();
  // 操作対象のフォーム要素を取得
  var $form = $(this);
  // フォームのデータをDisableにする前に取得
  var className = $form["0"].className;       // <---修正部分
  var tmpData = $form.serializeArray();

  // フォーム無効化
  $form.disable();

  // 修正部分
  var jsonStrBase = '{"' + className + '":{"';
  for(var i in tmpData ){
    jsonStrBase = jsonStrBase + tmpData[i].name + '": "' + tmpData[i].value +'","'
  }
  var jsonStr = jsonStrBase.slice(0, -2) + '}}'

  // 送信
  $.ajax({
    url: $form.attr('action'),
    type: $form.attr('method'),
    data: jsonStr,
    contentType:   'application/json',
    timeout: 5000,  // 単位はミリ秒

  }).done(function(result, textStatus, xhr){
    alert('OK');
  }).fail(function(xhr, textStatus, error){
    alert('NG...');
  }).always(function(xhr, textStatus){
    $form.enable();
  });
});

タイトルと異なってしまいますが、元々やりたかったことは、「グループ分けした情報をネストしたJSONで送りたい」となります。

ここに載せたコードでは、formを設置し、formから取得した値をjQueryのajaxで送信していますが、フォームを設置せず、「複数の input をグループ分けして、 $('#hoge').click(function(){ でグループのidなどでから内容を取得し、JSONを組み立てて送信する。」という方法の方がシンプルかもしれません。

Answer 1

複数のフォームをどれを押しても全フォームを走査して全データをおくるというように見えます
もしそうならformを区切らなければいいのではないでしょうか？
また通常のformのactionあてに勝手に整形したデータをおくっても
受け取ってもらえない可能性が高いのであまり良い方法にはみえません
もしやるならajax専用の受け口を作るべきではないでしょうか？
それと送るデータがJSON的な文字列を意識しているのであればその文字列に
パラメータ名をつけないといけません

よくよく仕様を再検討された方がよいでしょう

Comments

[hiroki_s]

回答ありがとうございます。
全フォームの走査は意図通りです。仕様は決まっておらず、出来ることを調査している段階です。
区切らないフォームも含め、検討を行う予定です。

> もしやるならajax専用の受け口を作るべきではないでしょうか？
これは、どのような物になるのでしょうか？（submitの他に方法があるのでしょうか？）

> パラメータ名をつけないといけません
質問の「解決方法（仮）」に contentType: 'application/json', を追記したのですが、これでいいのでしょうか？

Answer 2

ボタンクリックで form を submit (POST) したいということであれば、submit する直前に JavaScript で各テキストボックス（input type="text" 要素）から value を取得し、それを JSON 文字列に組み立て、隠しフィールドに入れて送信するという手段はいかがですか？

Comments

[hiroki_s]

回答ありがとうございます。

nameだけでなく、他の要素を使用すればいいんですね。最悪、nameにフォーム名1とインプット名1を記載して文字列解析も考えてはいたのですが、そちらの方が全然いいですね。

ただ、できれば、inputに毎回同じ内容(フォーム名)を書くのはやめたいとも思っており、せっかくフォーム名があるのだから、そこからとれればいいなと考えていました。
もしくは、複数のinputを何かで囲って定義し、それを取得することができれば…と。

[退会済みユーザー]

> 複数のinputを何かで囲って定義し、それを取得することができれば

form である必要はなくて、複数の input をグループ分けして、ボタンクリックで、

{ "group1":{"input1": "value1", "input2":"value2" }, "group2":{ ...

というような JSON 文字列を組み立てて、jQuery ajax を使ってサーバーの特定 URL に対して POST したいということですか？

それも特に問題なく可能だと思います。だだ、それが最適解かどうかは、質問の情報だけでは分かりませんが。

[hiroki_s]

> というような JSON 文字列を組み立てて、jQuery ajax を使ってサーバーの特定 URL に対して POST したいということですか？

そうです。そうしているつもりだったのですが、何かおかしなことをしているでしょうか？

当初の質問内容については、グループの名前を $form["0"].className から取得し、フォームからserializeArray()した情報を文字列結合するという方法で実現はできました。（質問文に「解決方法（仮）」として記載しました。）
divなども使おうとしたのですが、同じページ内で同じnameやidを使いたかったのでこの方法にしました。

[退会済みユーザー]

> 何かおかしなことをしているでしょうか？

jQuery ajax を使って、その data オプションに JSON 文字列を設定し POST するのであれ、input type="submit" ボタンのクリックで form を submit (POST 要求) するというところが「おかしなこと」です。

jQuery ajax を使うなら form を submit するようなことはしない（従い、form 要素も input type="submit" 要素も使わない）、form を submit するなら jQuery ajax は使わない・・・ということなのですが、私の言っていることが分かりますか？

[hiroki_s]

データオプションのjson（dataType:'json',）は、単純に私の間違いでした。（受信にJSONは期待していない）

jQuery ajaxでの送信に、 $('#hoge').click(function(){ ではなく、 $('form').submit(function(event) { で行っていますが、この辺りも「おかしなこと」になるでしょうか？

[退会済みユーザー]

> データオプションのjson（dataType:'json',）は、単純に私の間違いでした。（受信にJSONは期待していない）

受信ではなくて送信の話をしているのですが・・・　どうも話が通じてないように思います。質問にアップされていたコードの data: jsonStr の jsonStr は送信したい JSON 文字列ですよね。それで送信するなら form 要素は必要ないと言っているのですが。なので、 $('form').submit... も変では？

[hiroki_s]

いただいた回答を正しく理解できない部分があるので、少し基礎を勉強してきます。また後で質問させていただくと思いますが、その際はお願いいたします。

[hiroki_s]

遅くなりましたが、わかってきたかもしれません。
「複数の input をグループ分けして、 $('#hoge').click(function(){ でグループのidなどでから内容を取得し、JSONを組み立てて送信する。」という事…でいいんですよね。(教えていただいたそのままの事ですね)
その場合、form自体を使用する必要はない。
「formは置くが、その要素からは取得する必要はない」だと思ってしまっていました。

[退会済みユーザー]

その理解でいいと思います。「form を submit (POST) する」のと 「jQuery ajax で POST する」のとを混同されていたようですね。