- 締切済み
javascriptとフォーム
javascriptでフォームに入力した値を別ウィンドウにプレビューとしてその内容を自動生成して表示させたいのですが、やり方を教えて下さい。 この場合、すでにフォームタグがあり、submitボタンなどが存在している過程でお願いします。 自動生成する内容はtextareaのものです。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- dell_OK
- ベストアンサー率13% (770/5733)
プレビュー画面側で処理する方法でよければこんなやり方でできます。 入力画面 InputForm.html ---- <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>入力画面</title> </head> <body> <form> <textarea name="text1"></textarea> <textarea name="text2"></textarea> <button type="button" onclick="openPreview();">プレビュー</button> </form> </body> <script> function openPreview() { window.open("PreviewForm.html"); } </script> </html> ---- プレビュー画面 PreviewForm.html ---- <!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>プレビュー画面</title> </head> <body> <form id="previewForm"> <input type="submit" id="submitButton"> </form> </body> <script> const previewForm = document.getElementById("previewForm"); const submitButton = document.getElementById("submitButton"); window.opener.document.querySelectorAll("textarea").forEach(function (inputText) { const previewText = document.createElement("textarea"); previewText.name = inputText.name; previewText.innerHTML = inputText.value; previewText.readOnly = true; previewForm.insertBefore(previewText, submitButton); }) </script> </html> ----