##質問
PHPでhtmlを返すAPIを作成し、確認ボタンをクリックすることで、
APIからのレスポンス(html)である確認画面を表示することはできました。
レスポンスされたhtmlのボタン要素にapi.phpに記述している
javascriptを動作させるにはどうすれば良いのでしょうか?
戻るボタンで元の画面に戻るようにしたいです。
そもそも、アルゴリズムから再検討が必要かもしれません。
##ソースコード
html
1<body> 2 <h3>Document</h3> 3 <div id="work"> 4 <p>入力画面</p> 5 <form id="form" name="myForm"> 6 <p class="text">Q1.text: <input type="text" name="text1" value="hoge" /></p> 7 <p class="radio">Q2.radio: 8 <input type="radio" name="radio1" value="A" checked />A 9 <input type="radio" name="radio1" value="B" />B</p> 10 <p class="radio">Q3.checkbox: 11 <input type="checkbox" name="checkbox1[]" value="A" />A 12 <input type="checkbox" name="checkbox1[]" value="B" checked />B 13 <input type="checkbox" name="checkbox1[]" value="C" checked />C</p> 14 <input id="button" type="button" value="確認" /> 15 </form> 16 </div> 17 18 <script> 19 20 // ワークエリアの取得 21 const workArea = document.getElementById("work"); 22 23 // 確認ボタンが押されたら 24 document.getElementById("button").addEventListener("click", function () { 25 26 const formElement = document.getElementById('form'); 27 const formData = new FormData(formElement); 28 formData.append("name", "value"); 29 30 // api.phpへ接続 31 fetch('./api.php', { 32 method: "post", 33 body: formData 34 }).then((res) => { 35 if (res.status !== 200) { 36 throw new Error("error"); 37 } 38 return res.text(); 39 }).then((text) => { 40 console.log(text); 41 workArea.innerHTML = text; 42 }).catch((error) => { 43 console.log(error.message); 44 }).finally(() => { 45 console.log("finally"); 46 }); 47 }); 48 49 </script> 50</body>
api.php
php
1<?php 2echo "<p>確認画面</p>"; 3 4foreach($_POST as $key => $value) { 5 echo $key. " : <b>" .$value. "</b><br>"; 6} 7 8echo '<input id="back" type="button" value="戻る">'; 9echo '<input id="send" type="button" value="登録">'; 10 11$text = <<<"EOT" 12<script> 13document.getElementById("back").addEventListener("click", function () { 14 console.log("back"); 15}); 16</script> 17EOT; 18echo $text; 19?>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/10/08 23:21
2020/10/08 23:26