万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

JavaScriptとjQueryで子要素もserializeさせたい

javascript - How to serialize div tag's child elements by jQuery? - Stack Overflow

このようなHTMLがったとして、

<form id="frm" name='frm' action="." method="post">
  <div style="position: absolute; top:270px;">
  <div id='mybuttons'>
    <input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
    <input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
  </div>
  <input id="hidden-qid" type="hidden" name="set" value="hoge" />
  </div>
</form>

以下のようにすると

  $('#frm').submit(function() {
    var serialized_date = $('form#frm').serialize();
    console.log(serialized_date);

console.logでは、このhidden要素のsetは出るのに、 子要素になっているbtn1btn2はなぜかログに出てくれない・・ なので、子要素もserializeさせたい。

しかし、divタグのmybuttonsを消したくない。 なぜなら、

$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";

のような感じにmybuttonsの子へと動的に作成してるからだ。

すると、返答は、

$('#frm').submit(function() {
  var serialized_date = $('form#frm').serialize();
  var btn = $(document.activeElement);
  serialized_date += "&" + btn.attr("name") + "=" + btn.val();
  console.log(serialized_date);
});

のようにdocument.activeElementとしてフォーカスがあたっているボタンを追加し、 serialized_dateにあとで突っ込めば大丈夫なようだ。