inputのvalueを変数に入れたい

Question

id="room-id"の要素として出力したものをPHPで使いたい。
<span>などの要素として出力はできるが、変数に入れられず、<?php echo $hoge;?>での出力ができない。

<form id="make-call" class="pure-form" method="post">
      <input type="text" name="hoge" placeholder="教室IDを入力.." id="join-room">
      <button class="pure-button pure-button-success" type="submit">入室</button>
</form>
<!--出力可能-->
<span id="room-id"></span>
<!--出力不可-->
<?php echo $_GET['data'];?>
<!--POSTで取ろうとするが失敗-->
<?php echo $_POST['hoge'];?>

  jQuery('#make-call').on('submit', e => {
    e.preventDefault();
    // Initiate a call!
    const roomName = jQuery('#join-room').val();
    if (!roomName) {
      return;
    jQuery.ajax({    //$_get['data'];で取ろうとするが失敗
      type: 'get',
      url: "/video_chat",
      data: {roomName: roomName},
      success: function(data){
        console.log(data);
      }
    });

    }
    room = peer.joinRoom('mesh_video_' + roomName, {stream: localStream});

    jQuery('#room-id').text(roomName);//こうすれば<span id="room-id"></span>で出力は可能
    step3(room);
  });

※追記---------------------------
こちらで指定したIDを上記PHPのinputに入力することで、submitされた情報からuserを特定したいのでvalueを変数に置きたい。

Comments

[m.ts10806]

/video_chat で実行されるサーバー側の処理は最初のPHPコードなのでしょうか。どのような関係性で動かそうとしてますか？

[m.ts10806]

こちらで指定したIDとは？ちょっと質問者さんの頭の中だけにあることが多すぎて的確な回答は難しいですね。エスパーを期待しすぎです。要件がきちんと揃ってこそきちんと回答が得られます。

Answer 1

なにをしたいかわかりません。
jsの変数をphp経由で受け取ってjsで表示する意味がないかと
（もちろんphpでなにかに変換するならべつ）

どうしてもというならajaxでroomNameを渡しているのだから
コールバックされたdataに含んでおけばよいかなとも思いますが
jQuery('#room-id').text(roomName)以上の
何をしたいのかわからないので、明確には回答できません

Comments

[ya_suhn]

回答ありがとうございます。
PHP、javascriptともに勉強不足で、ajaxの使い方も別記事をいくつか見ながら書いたものなので理解が追い付いていないです。

コールバックされたdataに含むとはどのように書けばよろしいのでしょうか。
ご教授頂ければ幸いです。

[yambejp]

> コールバックされたdataに含む

データの送り先が「/video_chat」でこれがPHPなのかな？と
（今はそうなっていませんが）戻り値をjsonかなにかにして
{roomName:$_GET["roomName"]}を含んだオブジェクト（としてのテキスト）を
返せば参照できると思います。

むしろずぶの素人でわけもわからずこの処理を書いているなら
今考えているやり方はおそらく根本的にまちがっているので
忘れたほうがよい処理だと思いますよ

[ya_suhn]

ありがとうございます。
今考えているやり方はおそらく根本的にまちがっている
→その通りだと思います。
ajaxが非同期処理だからこの方法ではそもそも同じphpページでechoを使って出力する事ができないことが分かりました。
頑張って精進します。

Answer 2

<form>の<submit>を使うと、JavaScript(ajax)を使わなくともサーバ(PHP)に値は送信されます。 受け取り側のPHP(form action= で指定した送信先)で``` <?php echo $_POST["hoge"];``` と書けば、id="join-room"に入力された値を表示する事は可能です。

仮に、ファイル名を「form.php」として、自分自身にsubmitすると考えると

<form id="make-call" class="pure-form" method="post" action="form.php">
      <input type="text" name="hoge" placeholder="教室IDを入力.." id="join-room">
      <button class="pure-button pure-button-success" type="submit">入室</button>
</form>

<span id="room-id"><?php echo $_POST["hoge"]; ?></span>

で、表示されるはずです。

ajaxを使って、画面遷移させずにリアルタイムに通信させて値を取得したい場合には、そのajaxに値を返すPHPを用意する必要があります。

  jQuery('#make-call').on('submit', e => {
    e.preventDefault();
    // Initiate a call!
    const roomName = jQuery('#join-room').val();
    if (!roomName) {
      return;
    jQuery.ajax({    //$_get['data'];で取ろうとするが失敗
      type: 'get',
      url: "/video_chat",
      data: {roomName: roomName},
      success: function(data){
        console.log(data);
      }
    });

    }
    room = peer.joinRoom('mesh_video_' + roomName, {stream: localStream});

    jQuery('#room-id').text(roomName);//こうすれば<span id="room-id"></span>で出力は可能
    step3(room);
  });

<?php
#/video_chat のURLで呼ばれるPHP
switch($_GET["roomName"]) {
    case 1:
        echo "ルーム１";
        break;
    case 2:
        echo "ルーム2";
        break;
}

Comments

[ya_suhn]

ご丁寧にコードを付けていただいて、ありがとうございます。
感激です。

上記の通り試してみましたが、どうしても$_POST['hoge'];を認識してくれません。
恐らく、
jQuery('#make-call').on('submit', e => {
e.preventDefault();
上記のようにsbumitの処理に非同期処理を追加しているのが原因かなぁとおもってます。（カンです）

自分自身、ajaxの使い方を勘違いしており、別の方法でなんとかやってみようと思います。