form内のエレメントの複数の属性値をPHPに送信したい

Question

###実現したいこと

実現したいことは以下になります：
・HTMLフォーム内のエレメントの属性値をPHPに送信したい
・送信したいデータは、『style属性、name属性、value属性(またはinnerHTML)』
・postやgetだと基本的にvalue属性という一つの属性値しか送れないので困っている
・javascriptでDOM操作して、value属性値に他の全ての属性値をカンマで区切って入力→php側で分離する、みたいなことも考えたが、不自然な気がする。

以下のようなことをしたいです。

<form method="post" action="hogehoge.php" >
<input type="text" name="aaa" style="background-color:red" value="foo1" innerHTML="hoge1">
<input type="text" name="bbb" style="background-color:yellow" value="foo2" innerHTML="hoge2">
<button type="submit">送信</button>
</form>

<?php
//各inputのname、style、value、innerHTMLのデータを、各配列で受け取る
$for_aaa = スーパーグローバル変数的な何かfor_aaa;
$for_bbb = スーパーグローバル変数的な何かfor_bbb;

print_r($for_aaa);//Array([0]=>"aaa",[1]=>"rgba=(hoge,hoge,hoge,hoge);",[2]=>"foo1",[3]=>hoge1)
print_r($for_bbb);//上同様
?>

ご回答宜しくお願いします。

Comments

[maisumakun]

さっきの質問とほとんど変わっていない気がするのですが、別にした意味はありますでしょうか？

[WeilSpinor]

本当はもっと自由にname属性のないdivでやりたいのですが、今回の質問は、その妥協版（つまりformとinputを使うこと）です。
追記をしすぎるとややこしくなるので、別に立てました。
すみません。

[maisumakun]

前の質問に回答しましたが…結局「なんのために」HTMLをサーバサイドで保存する必要があるのでしょうか。

[Y.H.]

ではhttps://teratail.com/questions/184013 の方は
ご自分で以下を回答として記載しクローズ（解決済み）お願いします。
「本当はもっと自由にname属性のないdivでやりたいのですが、今回の質問は、その妥協版（つまりformとinputを使うこと）です。
追記をしすぎるとややこしくなるので、別に立てます。」

Answer 1

各データをJSON化して送れば良いのでは。

以下サンプル

    <form method="post" action="hogehoge.php" >
      <input type="text" name="aaa" style="background-color:red" value="foo1" innerHTML="hoge1">
      <input type="text" name="bbb" style="background-color:yellow" value="foo2" innerHTML="hoge2">
      <button id="submit-btn" type="submit">送信</button>
    </form>

    <script type="text/javascript">

      const getStyleNameValue = function(elm){
        return {
            [elm.name]:{
              name:elm.name,
              value:elm.value,
              style:elm.getAttribute("style")
            }
        }
      }

      const submitForm = function(json){
        const xhr = new XMLHttpRequest();
        xhr.open("POST", 'hogehoge.php', true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onload = () => {
          console.log("ok");
        };
        xhr.onerror = () => {
          console.log(xhr.status,"err")
        };
        xhr.send(json)
      }

      document.getElementById("submit-btn").addEventListener("click",function(ev){
        ev.preventDefault();
        const inputAaaElm = document.getElementsByName("aaa")[0];
        const inputBbbElm = document.getElementsByName("bbb")[0];

        const aaaObj = getStyleNameValue(inputAaaElm);
        const bbbObj = getStyleNameValue(inputBbbElm);

        const bodyObj = Object.assign(aaaObj,bbbObj)

        const bodyJson = JSON.stringify(bodyObj);

        submitForm(bodyJson);
      });

    </script>

生成されるjson

{  
   "aaa":{  
      "name":"aaa",
      "value":"foo1",
      "style":"background-color:red"
   },
   "bbb":{  
      "name":"bbb",
      "value":"foo2",
      "style":"background-color:yellow"
   }
}

Answer 2

なぜ（何のために）やりたいのか判りませんが、方法としては質問者さんが考えたこれ↓しかないです。
送信するデータフォーマットについては、formでカンマ区切り、ajaxでjsonなどご自由に。

・javascriptでDOM操作して、value属性値に他の全ての属性値をカンマで区切って入力→php側で分離する、みたいなことも考えたが、不自然な気がする。

HTMLでは、サーバーに対してリクエストを行う場合、以下のMETHODでアクセスします。

GET,POST,HEAD,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH

一般的にはWebサーバーで受け付けるMETHODはGET, POST, HEADくらいです。

各METHODの詳細はこのあたりを参照ください。(developer.mozilla.org)HTTP リクエストメソッド

Comments

[Y.H.]

低評価入れた方へ。
低評価の理由お教え願えないでしょうか？
私が何か勘違いや思い違いをして回答しているのであれば訂正や撤回を行いますので。

Answer 3

めんどうなのでフォームのinnerHTMLを送ってしまえば？
postデータ確認のためphpで受ける設定にしてあります。
あとはphp側でDOMDocumentかなにかで処理すればよいでしょう

• my.php

<?PHP
ob_start();
print_r($_POST);
$a=ob_get_contents();
ob_end_clean();
print htmlspecialchars($a);
?>
<script>
window.addEventListener('pageshow', function(e){
  if(f0=document.querySelector('#f0')) f0.parentNode.removeChild(f0);
});
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('form').addEventListener('submit',function(e){
    e.preventDefault();
    var f0=document.createElement('form');
    f0.id="f0";
    f0.method="post";
    f0.style.display="none";
    var inp=document.createElement('input');
    inp.setAttribute('name','html');
    inp.setAttribute('value',document.querySelector('#f1').innerHTML);
    f0.appendChild(inp);
    document.querySelector('body').appendChild(f0);
    f0.submit();
  });
});
</script>
<form method="post" id="f1">
<input type="text" name="aaa" style="background-color:red" value="foo1" innerHTML="hoge1">
<input type="text" name="bbb" style="background-color:yellow" value="foo2" innerHTML="hoge2">
<button id="submit-btn" type="submit">送信</button>
</form>

Comments

[WeilSpinor]

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

formエレメント内側にある送りたい子ノードのエレメントたちをinnerHTMLで取得して、
valueに格納する

というやり方ですね。

ものすごい巧みでビックリしました。

というか、
innerHTMLは自分自身のノード情報を取得するものだと思っていたのですが、違うんですね。

innerHTMLとは、「エレメントの中に記述されたHTML」という感じなんでしょうか？
中に書かれたエレメントが子ノードになると言う訳では無いんですかね…よくわかりません。

[WeilSpinor]

すみません、色々意味不明な勘違いしてたかもしれません。
文字通り、「ただのエレメント内部のHTML(つまり下の階層のhtml)」というだけのことですね。
documentオブジェクトのinnerhtmlがhtml全体であるのと同じですね。