質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.21%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 497

WeilSpinor

score -34

実現したいこと

実現したいことは以下になります:
・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);//上同様
?>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2019/04/11 23:33

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

    キャンセル

  • Y.H.

    2019/04/11 23:36

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

    キャンセル

  • 退会済みユーザー

    2019/04/12 00:13

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

+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"
   }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

めんどうなのでフォームの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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/12 16:37

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

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

    というやり方ですね。

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

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

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

    キャンセル

  • 2019/04/12 16:53

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

    キャンセル

0

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/11 23:44

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる