HTMLフォーム内でinputに入力したURLのWEBサイトをiframeを使用してリアルタイムで表示したい

フォームに入力したURLのWEBサイトのプレビューをリアルタイムでフォームの下部に表示したいのですが、何か方法はございますでしょうか。
下記に現在のコードを記載させていただきます。

<form action="partner_conf.php" method="post" onsubmit="return chkHissu(this)" name="myForm">
<table>
    <tr><th class="fromtbltit"><label for="comapany" class="input1">貴社WEBサイトURL<span class="red_notes">*</span></label></th>
      <td><input type="url" name="corporate" class="inputt" placeholder="入力例：https://xxx.co.jp" id="corporate"><br><br>
      <?php
      $corporate = "";
      echo "<iframe src='".$corporate."' width='100%' height='400px'></iframe>";
      ?>
    </td>
    </tr>
</table>
<div class="align_c" style="text-align:center;">
    <input type="submit" value="確認" class="submit" name="button" style="margin-left:0px;">
</div>
</form>

「$corporate」に値として「input」に入力したURLを代入して「iframe」で該当WEBサイトを表示する方法を試しているのですが、リアルタイムでの代入の方法が分からずに立ち止まっている状態です。
お分かりになられる方がいらっしゃいましたら、ご教授いただければ幸いでございます。
どうぞよろしくお願い申し上げます。

m.ts10806

2020/10/16 03:48

用途は何でしょう。あと何かしら調べたこと試したことはあるのでしょうか。

yamadadayo

2020/10/16 04:01

ご記入ありがとうございます。用途は、フォームにWEBサイトのURLを入力した人間にプレビュー(iframe等)を見せ、フォームから送信しようとしているURLに誤りが無いかを確認させるためです。 JavaSqriptで色々試しているのですが上手くいかず、直接ご教授いただきたく質問いたしました。

m.ts10806

2020/10/16 04:03

何も書いてなければ何も伝わりませんよ。試したことも、調べたことも。質問本文に記載してください。あとSqriptではなくScriptです。

yamadadayo

2020/10/16 04:06

ご教授ありがとうございます。そうですよね。詳しく記載できるようにまとめて質問文を修正いたします。また、誤字のご指摘もありがとうございます。

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

回答2件

私の試した方法は下記になります。

<tr>
<td>
<input type="url" name="corporate" class="inputt" placeholder="入力例：https://xxx.co.jp" id="corporate" onkeyup="inputCheck()"><br><br>
<script type="text/javascript">
function inputCheck() {
var inputValue = document.getElementById( "corporate" ).value;
document.getElementById( "check" ).innerHTML = '<iframe src="' + inputValue + '" width="100%" height="350px"></iframe>';
}
</script>
<div id="check"></div>
</td>
</tr>

こちらのサイトを参考にさせていただきました。
https://web-tsuku.life/input-value-realtime-check/#i

当質問にお力添えいただいた方々、どうもありがとうございました。

投稿2020/10/23 02:46

yamadadayo

総合スコア39