大変お世話になっております。

あるサイト①から他のサイト②を開く際に①の値をget送信し、その開いたサイト②にて、urlから値を取得し、更に他のサイト③にその値を送信するために、その値を②にて代入する以下の様な設定が機能しております。

これをget送信でなく、method="post"の様にpost送信にした場合、サイト②ではどのように取得し、値を代入すれば宜しいかご教授頂けませんでしょうか。

つまり、以下のサイト①でmethod="post"を使用した場合のサイト②内でのjavascriptの記述方法をご教授頂けませんでしょうか。

```

    サイト①
    <form name="reserve" method="get" action="http://xxxx.com/send.html">
    <input type="hidden" name="id" value="{$product.id}" />
    <input type="submit" value="送信する" class="sendButton">
    </form>
    
    
    サイト②
    http://xxxx.com/send.html?id=7
    
    <script type="text/javascript"> 
    const url = new URL(location.href);
    const id = url.searchParams.get("id");
    </script>
    
    <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('id').value = id;
      });
    </script>
    
    <form id="Form" method="post" action="xxxxxxx">
    <input name="id" id="id" type="hidden" value="" />
    <input type="submit" value="送信する" class="sendButton">
    </form>
    
```

追記：

```

    サイト①
    php:
    <?php
        $post_json_data = json_encode($_POST);
    ?>
    
    
    <form name="reserve" method="post" action="http://xxxx.com/send.html">
    <input type="hidden" name="id" value="{$product.id}" />
    <input type="hidden" name="cusotmer_id" value="{$smarty.get.cusotmer_id}" />
    <input type="submit" value="送信する" class="sendButton">
    </form>
    
    
    サイト②
    http://xxxx.com/send.html
    
    <script type="text/javascript"> 
    const post_data = <?php echo $post_json_data; ?>;
    </script>
    
    ＊＊＊
    <h1><input type="text" disabled name="cusotmer_id" id="cusotmer_id" value=""></h1>
    
    <form id="Form" method="post" action="xxxxxxx">
    <input name="id" id="id" type="hidden" value="" />
    <input name="customer_id" id="customer_id" type="hidden" value="" />
    <input type="submit" value="送信する" class="sendButton">
    </form>
    
```

頂きました記述をもとに、json_encode、およびもう一方の個々に取得する方法の両者を試しておりますが、どうしても両者とも値を取得、そして設定できません。

実際は、値が複数存在しますので、json_encodeで試した記述を追記に補足しました。サイト②のjavascriptで取得した値であるpost_dataはどのようにhtml上でそれぞれのvalueに設定されるのでしょうか。試しにサイト②の＊＊＊でcusotmer_idを表示させてみると[object
HTMLCollection] と表示されます。
CC BY-SA 4.0
2018-12-24T19:57:14.060
51488
2019-01-09T07:04:01.443
2018-12-25T12:55:21.983
19211
19211
question
javascript php html form
値をpost送信した際の送信先でのjavascriptを使用した取得、設定方法
PHPからHTML側のJavascriptにサーバ側のデータを渡す方法はいくつかありますが、  
一般的には[json_encode](http://php.net/manual/ja/function.json-
encode.php)を利用することが多いと思います。

```

    <?php
        $post_json_data = json_encode($_POST);
    ?><html>
      <head>
      <head>
      <body>
        <script type="text/javascript"> 
            const post_data = <?php echo $post_json_data; ?>;
        </script>
      <body>
    <html>
    
```

ただ今回の場合のように特定の値一つだけで、値の無害化を **確実にもれなく十分に** 実行できるような場合は直接渡してしまっても良いとは思います。

```

    <?php
        //例として必ずidにはint型しか入らないという前提の弱い無害化
        $id = (int)$_POST["id"];
    ?><html>
      <head>
      <head>
      <body>
       <script type="text/javascript"> 
            const id = <?php echo $id;?>;
        </script>
      <body>
    <html>
    
```

以下はWebのサーバとクライアントの基礎知識です。  
もしご存知の場合は、飛ばして頂いてOKです。

クライアントはサーバにリクエストします。  
サーバはリクエストに対してレスポンスを返します。

PHPはサーバサイドの言語、HTML側のJavascriptはクライアントサイドの言語です。  
そしてPOSTとはクライアントサイドからリクエストする方式の一つです

そのためイメージとしては  
（HTML+Javascript）→（PHP）→（HTML+Javascript）→（PHP）→（HTML+Javascript）→…  
とデータをクライアントに返す、データをサーバに送るを繰り返します。
CC BY-SA 4.0
2018-12-25T00:37:31.657
51489
2018-12-25T00:37:31.657
22665
51488
answer
単純にpostで'data1=a1&data2=a2&data3=a3&data4=a4'を送り、サーバからの結果をjsonで受けるサンプルを書いて見ました。

```

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
        var xhr = new XMLHttpRequest();
    
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                    var datas = xhr.response;
                    console.log(' data1:'+datas.data1);
                    console.log(' data2:'+datas.data2);
                    console.log(' data3:'+datas.data3);
                    console.log(' data4:'+datas.data4);
    
                } else {
                    console.log("status = " + xhr.status);
                }
            }
        };
    
        var senddata = 'data1=a1&data2=a2&data3=a3&data4=a4';
    
        xhr.open("POST", 'index.php');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.responseType = "json";
        xhr.send(senddata);
    </script>
    </body>
    </html>
    
```

**index.phpは**

```

    <?php
    
    $data1 = $_POST['data1'];
    $data2 = $_POST['data2'];
    $data3 = $_POST['data3'];
    $data4 = $_POST['data4'];
    
    $arr_data = array('data1'=>$data1,'data2'=>$data2,'data3'=>$data3,'data4'=>$data4);
    
    $json_str = json_encode($arr_data);
    
    echo $json_str;
    
```
CC BY-SA 4.0
2018-12-26T02:18:14.813
51516
2018-12-26T02:18:14.813
22793
51488
answer