HTMLから、formのvalue以外の属性値を外部PHPに渡したい

Question

初めまして。
初心者ながらご質問させていただきます。
HTMLに

<form action="hoge.php" method="post"> <input type="text" id="test" value="初期値" _hoge="foo"> </form>

とあった場合、_hoge属性の属性値fooを外部PHPに送信することは可能なのでしょうか？
また、複数の属性値を同時に送信すること(valueと_hogeを同時)は可能でしょうか。

どういった関数を使えばできる、といった情報だけでも構いませんので、ご教授ください。

Answer 1

もし、サーバーに渡したいプロパティが HTML5 の独自カスタム属性の仕様に則っていれば、dataset プロパティに独自属性のデータが格納されます。

<!-- "data-" で記載された属性は dataset に格納されます。 -->
<input type="text" id="test" value="初期値" data-aaa="foo" data-bbb="bar" onclick="test()"> 
<script>
window.test = function() {
  // id="test" の DOM を取得
  var test = document.getElementById("test");
  // JSON.stringify(test.dataset) で独自プロパティを JSON 文字列に変換できます。
  alert(JSON.stringify(test.dataset)); 
}
</script>

結果：
{"aaa":"foo","bbb":"bar"}

dataset を JSON （文字列）化してサーバーに送信し、サーバー側では JSON 文字列をパース (json_decode()) する処理を記載すれば、比較的少ないコードになります。

○ 手順

1. サーバーに渡したいプロパティを "data-" の形に変更
2. データを送信する際、該当タグの dataset を JSON 文字列に変換し、hidden に設定
3. サーバー側で、2の値を json_decode で分解する

ただし、結局のところ、ブラウザからサーバーにデータを送る場合、key - value の形に直すことになりますので、送信したいタグが多ければ多いほど処理は複雑になりますね。
（WEBサーバーを独自でカスタム出来るなら話が変わりますが・・・）

参考までに。

Comments

[nagata_se]

なるほど・・・今回の環境ですと、WEBサーバーを独自カスタムするのは困難ですが、多少なりとも短くできるなら、この方法でいってみます！ありがとうございました。

Answer 2

初めまして。質問者の方の意に沿った回答か確信がありませんが、以下の方法ではいかがでしょうか。
【前提】
・PHPへの送信はsubmitで行う。
・JavaScriptを使っても構わない。
【対応方法】
概要：Submit時にJavaScriptでPHPに渡すクエリパラメータを構成して引き渡す。
手順：
１）SubmitのイベントをJavaScriptの適当な関数でハンドリングする。
２）同関数内でinputタグに指定している属性情報を取得する。
３）同関数内でinputタグの「type="hidden"」として属性情報を引き渡すためのタグをHTMLに挿入する。
４）同関数内でSubmitを実行する。
いかがでしょうか？

Comments

[nagata_se]

早速のご返答、ありがとうございます。
まず、前提条件ですが
・JavaScriptを使っても構わない。
・送信方法に特に拘りはない
という感じです。
hiddenで送信する方法は私も思いついたのですが、作成しているコードの属性の種類がかなり多い（最大で１３個）のです。
そのため、hiddenで送ろうとすると、かなり冗長なコードになってしまうため、何か良い手段はないかと模索している次第です。

質問内容に詳細が足らず、申し訳ありません。