知りたいこと

javascriptに文字列を代入する際、その中に<?php ?>を入れる方法を教えてください

やったこと

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="date">
      あ
    </div>
  </body>
  <script type="text/javascript">

    <!--　ここに入力欄を記述。phpタグを動作させたくない -->

    document.getElementById('date').innerHTML = "\
            <div class='form-group'>\
              <label for='date_end'>終了日(１日で終わる場合は同じ日にちを指定してください。)</label>\
              <input type='date' id='date_end' name='date_end'\
              value='<?php print(htmlspecialchars($_POST['date_end'], ENT_QUOTES)); ?>'
              required>\
            </div>";
  </script>
</html>

結果（失敗）

おそらくPHPのせいで、最後のrequireがはみ出してます。

終了日(１日で終わる場合は同じ日にちを指定してください。)

[年 /月/日]
' required>

[年 /月/日]はinputの入力欄です

稚拙な質問ですが、お願いいたします。

otn

2019/02/24 09:31

PHPコードを実行してその出力結果を代入したのか、そうじゃなくて "<?php ～～?>"という文字列自体を代入したいのかどちらですか？

kanka

2019/02/24 10:23

後者です。 innerHTML='<?php ～～?>' と記述している段階ではphpを実行せず、 innnerHTMLでHTML内に出力された段階で'<?php ～～?>'を実行したいと言う意味です。わかりにくくてすみません。

m.ts10806

2019/02/24 10:37

この実行しているファイル自体はphpでしょうか？htmlでしょうか？それとも何かのフレームワークのViewファイルでしょうか？

kanka

2019/02/24 11:15

phpファイルです

otn

2019/02/24 11:34 編集

> innnerHTMLでHTML内に出力された段階で'<?php ～～?>'を実行したいと言う意味です。 JavaScriptには、PHPコードを実行する機能は無いですよ。つまり、無理です。 PHPは、サーバー上で動きます。

行動規範の内容に同意します

回答2件

innerHTML='<?php ～～?>'

と記述している段階ではphpを実行せず、
innnerHTMLでHTML内に出力された段階で'<?php ～～?>'を実行したいと言う意味です。

既に指摘があるように提示の順序で処理をさせることは無理です。
PHPはサーバーサイドの言語。
サーバーサイドの処理が先に行われて、その結果が画面に出力されます。
その出力結果をWebブラウザで確認するから、それぞれ（HTML,JavaScript,cssなどクライアントサイドの処理）が動作するようになっているわけです。

ちなみにこれも既に指摘があることとつながるのですが、提示のコードそのままではJavaScript側でエラーが出ます。
Uncaught SyntaxError: Invalid or unexpected token

こちらをどのように解決するかを考えなければなりません。

「PHPのせいで」と書かれていますが、このコードを書かれたのは自身です。
プログラムは書かれたとおり、指示したとおりにしか動きません。
つまり、「PHPのせい」ではなく「自分の書き方のせい」というのが問題の本質です。

ちなみに提示のコードをそのままPHPファイルで実行させると、以下の出力結果になります。

html
1  <script type="text/javascript">
2
3    <!--　ここに入力欄を記述。phpタグを動作させたくない -->
4
5    document.getElementById('date').innerHTML = `
6            <div class='form-group'>\
7              <label for='date_end'>終了日(１日で終わる場合は同じ日にちを指定してください。)</label>\
8              <input type='date' id='date_end' name='date_end'\
9              value='<br />
10<b>Notice</b>:  Undefined index: date_end in <b>XXX.php</b> on line <b>20</b><br />
11'
12              required>\
13            </div>`;
14  </script>

まあ、私の場合、POSTさせてる値がないですから、このNoticeは当然といえば当然ですね。

とりあえず固定の文字列を入れてみました。

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div id="date">
10      あ
11    </div>
12  </body>
13  <script type="text/javascript">
14
15    <!--　ここに入力欄を記述。phpタグを動作させたくない -->
16
17    document.getElementById('date').innerHTML = `
18            <div class='form-group'>\
19              <label for='date_end'>終了日(１日で終わる場合は同じ日にちを指定してください。)</label>\
20              <input type='date' id='date_end' name='date_end'\
21              value='hello'
22              required>\
23            </div>`;
24  </script>
25</html>

一応、エラーは消えましたが、おそらくdate型のinputだからでしょうかね。
画面表示とコンソールが下記のようになっています。

ちょっと与える文字列が適当すぎました。
では、phpで固定で日付を与えて見ましょう。

php
1    document.getElementById('date').innerHTML = `
2            <div class='form-group'>\
3              <label for='date_end'>終了日(１日で終わる場合は同じ日にちを指定してください。)</label>\
4              <input type='date' id='date_end' name='date_end'\
5              value='<?php print(htmlspecialchars(date("Y-m-d"), ENT_QUOTES)); ?>'
6              required>\
7            </div>`;

エラーも消え、正しくinputに表示されました。

ここまできて気づきませんか？

最後のrequireがはみ出してます。

↑この問題起きて無くないですか？

POSTされてない場合はNoticeが起き、何かしら文字列が与えられている場合はdate型のワーニングがHTMLから出力され、date型で解釈できる文字列であれば何も起きていません。

POSTされてる値は何も問題ないんでしょうか。もしrequireはみ出ているならそちらの方に問題ありそうですよ。ご確認ください。

ちなみに、この内容だけだと下記のようにするのとなんら変わりませんよね。

php
1    <div id="date">
2      <div class='form-group'>
3      	<label for='date_end'>終了日(１日で終わる場合は同じ日にちを指定してください。)</label>
4      	<input type='date' id='date_end' name='date_end' value='<?php print(htmlspecialchars($_POST['date_end'], ENT_QUOTES)); ?>' required>
5      </div>
6    </div>